<!DOCTYPE html> <html> <head> <title>z-index tests #3</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../../test.js"></script> <style type="text/css"> div { font: 12px Arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px solid #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 solid #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>