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