<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html lang="en-US"> <head> <title>Layered Presentation</title> <style type="text/css"> div.contain { position: relative; height: 600px; width: 600px; border: 10px solid black; margin: 1em; } div.subcontain { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } div.contain p { position: absolute; width: 100px; height: 100px; padding: 50px; /* 200px * 200px overall */ margin: 0; border: none; font: bold 80px/1 Verdana, Arial, sans-serif; text-align: center; color: white; } .one { top: 0px; left: 200px; background: #f00; } .two { top: 50px; left: 350px; background: #f90; } .three{ top: 200px; left: 400px; background: #cc0; } .four { top: 350px; left: 350px; background: #0c0; } .five { top: 400px; left: 200px; background: #099; } .six { top: 350px; left: 50px; background: #00f; } .seven{ top: 200px; left: 0px; background: #609; } .eight{ top: 50px; left: 50px; background: #906; } </style> </head> <body> <h1>Layered Presentation</h1> <p> Robert O'Callahan pointed out to me some mistakes in this test that I have not yet had the time to examine or correct. </p> <p>In each of the following, 1 should be the top layer and 8 the bottom layer:</p> <div class="contain"> <p class="eight"> 8 hide me</p> <p class="seven">7</p> <p class="six">6</p> <p class="five">5</p> <p class="four">4</p> <p class="three">3</p> <p class="two">2</p> <p class="one">1</p> </div> <div class="contain"> <p class="one" style="z-index: 4">1</p> <p class="two" style="z-index: 3">2</p> <p class="three" style="z-index: 2">3</p> <p class="four" style="z-index: 1">4</p> <p class="five" style="z-index: 0">5</p> <p class="six" style="z-index: -1">6</p> <p class="seven" style="z-index: -2">7</p> <p class="eight" style="z-index: -3"> 8 hide me</p> </div> <div class="contain"> <p class="one" style="z-index: 4000000">1</p> <p class="two" style="z-index: 3000000">2</p> <p class="three" style="z-index: 2000000">3</p> <p class="four" style="z-index: 1000000">4</p> <p class="five" style="z-index: 0">5</p> <p class="six" style="z-index: -1000000">6</p> <p class="seven" style="z-index: -2000000">7</p> <p class="eight" style="z-index: -3000000">8</p> </div> <div class="contain"> <p class="one" style="z-index: 3">1</p> <p class="two" style="z-index: +2">2</p> <p class="four" style="z-index: +0">4</p> <p class="three" style="z-index: -0">3</p> <p class="six" style="z-index: -2">6</p> <!-- determined by order in doc --> <p class="five" style="z-index: -2">5</p> <p class="seven" style="z-index: -30">7</p> <p class="eight" style="z-index: -040">8</p> <!-- decimal, not octal --> </div> <div class="contain"> <p class="six" style="z-index: 0">6</p> <p class="five" style="z-index: 0">5</p> <p class="four" style="z-index: 0">4</p> <p class="eight" style="z-index: -3">8</p> <p class="seven" style="z-index: -3">7</p> <p class="three" style="z-index: 4">3</p> <p class="two" style="z-index: 4">2</p> <p class="one" style="z-index: 4">1</p> </div> <div class="contain"> <p class="one" style="z-index: 4">1</p> <p class="two" style="z-index: 3">2</p> <p class="three" style="z-index: 2">3</p> <div class="subcontain" style="z-index: 0"> <p class="four" style="z-index: 9">4</p> <p class="five" style="z-index: 0">5</p> <p class="six" style="z-index: -9">6</p> </div> <p class="seven" style="z-index: -2">7</p> <p class="eight" style="z-index: -3">8</p> </div> <div class="contain"> <div class="subcontain" style="z-index: auto"> <p class="four" style="z-index: 1">4</p> <p class="two" style="z-index: 3">2</p> <p class="seven" style="z-index: -2">7</p> </div> <p class="three" style="z-index: 2">3</p> <p class="five" style="z-index: 0">5</p> <p class="six" style="z-index: -1">6</p> <p class="one" style="z-index: 4">1</p> <p class="eight" style="z-index: -3">8</p> </div> <p>Using assumed default value of z-index (may not pass):</p> <div class="contain"> <div class="subcontain"> <!-- ASSUMED z-index of auto --> <p class="four" style="z-index: 1">4</p> <p class="two" style="z-index: 3">2</p> <p class="seven" style="z-index: -2">7</p> </div> <p class="three" style="z-index: 2">3</p> <p class="five" style="z-index: 0">5</p> <p class="six" style="z-index: -1">6</p> <p class="one" style="z-index: 4">1</p> <p class="eight" style="z-index: -3">8</p> </div> </body></html>