Code snippet page

<!-- XHTML:CSS Layout snippet 8. -->
<!-- Creating layers with the z-index. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View snippet page</title>
<style type="text/css">
/* elements must be positioned with either 'position:absolute', 
'position:relative' or 'position:fixed' */
/* An element with a higher z-index appears in front of an element with a lower z-index.
When two elements have the same value, or if neither has been assigned a value, 
the source order determines the display order. The element that is defined earlier
in the source is displayed behind the one defined later.
/* best to assign layers to 'id's rather than 'class' */
/* best not to use negative z-index values */
#lowerLayer {
	position:absolute;
	top:20px;
	left:20px;
	width:760px;
	background-color: #FF3366;
	border:2px solid #000000;
	z-index:1;
	/* add a height dimension because the elements inside the division
	 are positioned and therefore the height will otherwise collapse to zero
	 or to the bottom of any text contained within the element */
	height:294px;
	}
#middleLayer {
	position:absolute;
	top:70px;
	left:450px;
	z-index:2;
	}
#upperLayer {
	position:absolute;
	top:100px;
	left:550px;
	z-index:3;
	}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	}
</style>
</head>
<body>

<div id="lowerLayer">
<!-- the descendant paragraph text element has the z-index of the parent element-->
<p>Lower layer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<img id="middleLayer" src="7_space.jpg" alt="Middle layer" title="Middle layer" width="233" height="284"  />
<img id="upperLayer" src="over.gif" alt="Upper layer" title="Upper layer" width="22" height="22" />

</body>
</html>