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