<!--
* @author Niklas von Hertzen <niklas at hertzen.com>
* @created 15.7.2011 
* @website http://hertzen.com
-->
<!DOCTYPE html>
<html>
    <head>
        <title>z-index tests #3</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="#" type="text/css" rel="stylesheet"> 
        <script type="text/javascript" src="../external/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="../build/html2canvas.js"></script>
        <script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
        <script type="text/javascript">
            $(window).ready(function() {
          
                $('body').html2canvas({
                    logging:true
                });
            });
        </script>

        <style type="text/css">

            div { font: 12px Arial; }

            span.bold { font-weight: bold; }

            div.lev1 {
                width: 250px;
                height: 70px;
                position: relative;
                border: 2px outset #669966;
                background-color: #ccffcc;
                padding-left: 5px;
           
            }

            #container1 {
                z-index: 1;
                position: absolute;
                top: 30px;
                left: 75px;
            }

            div.lev2 {
                opacity: 0.9;
                width: 200px;
                height: 60px;
                position: relative;
                border: 2px outset #990000;
                background-color: #ffdddd;
                padding-left: 5px;
            }

            #container2 {
                z-index: 1;
                position: absolute;
                top: 20px;
                left: 110px;
            }

            div.lev3 {
                z-index: 10;
                width: 100px;
                position: relative;
                border: 2px outset #000099;
                background-color: #ddddff;
                padding-left: 5px;
            }

        </style></head>

    <body>

        <br />

        <div class="lev1">
            <span class="bold">LEVEL #1</span>

            <div id="container1">

                <div class="lev2">
                    <br /><span class="bold">LEVEL #2</span>
                    <br />z-index: 1;

                    <div id="container2">

                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>
                        <div class="lev3"><span class="bold">LEVEL #3</span></div>

                    </div>

                </div>

                <div class="lev2">
                    <br /><span class="bold">LEVEL #2</span>
                    <br />z-index: 1;
                </div>

            </div>
        </div>

        <div class="lev1" style="position:static">
            <span class="bold">LEVEL #1</span>
        </div>

        <div class="lev1">
            <span class="bold">LEVEL #1</span>
        </div>

        <div class="lev1">
            <span class="bold">LEVEL #1</span>
        </div>
    </body>
</html>