<!-- * @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>