<!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">&nbsp;8&nbsp;hide&nbsp;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">&nbsp;8&nbsp;hide&nbsp;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>
