<!--
* @author Niklas von Hertzen <niklas at hertzen.com>
* @created 15.7.2011 
* @website http://hertzen.com
-->
<!DOCTYPE html>
<html>
    <head>
        <title>z-index tests #2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="#" type="text/css" rel="stylesheet"> 
        <script type="text/javascript" src="test.js"></script>
        <style type="text/css">

            div { font: 12px Arial; }

            span.bold { font-weight: bold; }

            #div2 { z-index: 2; }
            #div3 { z-index: 1; }
            #div4 { z-index: 10; }

            #div1,#div3 {
                height: 80px;
                position: relative;
                border: 1px dashed #669966;
                background-color: #ccffcc;
                padding-left: 5px;
            }

            #div2 {
                opacity: 0.8;
                position: absolute;
                width: 150px;
                height: 200px;
                top: 20px;
                left: 170px;
                border: 1px dashed #990000;
                background-color: #ffdddd;
                text-align: center;
            }

            #div4 {
                opacity: 0.8;
                position: absolute;
                width: 200px;
                height: 70px;
                top: 65px;
                left: 50px;
                border: 1px dashed #000099;
                background-color: #ddddff;
                text-align: left;
                padding-left: 10px;
            }

            #div5{
                border: 1px dashed #669966;
                background-color: #ccffcc;
                padding-left: 5px;
                position:relative;
                margin-bottom:-15px;
                height:50px;
                margin-top:10px;
               
            }

            #div6{
                border: 1px dashed #000099;
                background-color: #ddddff;
                text-align: left;
                padding-left: 10px;
               
            }

        </style></head>

    <body>

        <br />

        <div id="div1">
            <br /><span class="bold">DIV #1</span>
            <br />position: relative;
            <div id="div2">
                <br /><span class="bold">DIV #2</span>
                <br />position: absolute;
                <br />z-index: 2;
            </div>
        </div>

        <br />

        <div id="div3">
            <br /><span class="bold">DIV #3</span>
            <br />position: relative;
            <br />z-index: 1;
            <div id="div4">
                <br /><span class="bold">DIV #4</span>
                <br />position: absolute;
                <br />z-index: 10;
            </div>
        </div>

        <div id="div5"><br />DIV #5<br />position:relative;<br /></div>

        <div id ="div6"><br />DIV #6<br />position:static;<br /></div>

    </body>
</html>