<!DOCTYPE html>
<html>
<head>
<title>Show z-index in use </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* {
margin: 0;
border: 0;
padding: 0;
}
#topbanner {
position: absolute;
z-index: -1;
width: 600px;
top: 10px;
left: 100px;
}
#texthead {
position: absolute;
z-index: 1;
width: 600px;
top: 20px;
left: 120px;
color: #ffffff;
font: bold 18px/24px verdana, tahoma, sans-serif;
font-weight: bold;
}
#gofaster1 {
position: absolute;
z-index: 1;
width: 600px;
top: 28px;
left: 120px;
color: white;
}
#gofaster2 {
position: absolute;
z-index: 1;
width: 600px;
top: 30px;
left: 120px;
color: white;
}
#gofaster3 {
position: absolute;
z-index: 1;
width: 600px;
top: 32px;
left: 120px;
color: white;
}
#slogan {
position: absolute;
z-index: 1;
top: 35px;
left: 120px;
color: #ffffff;
font: bold 16px/40px verdana, tahoma, sans-serif;
}
</style>
</head>
<body>
<div id="topbanner">
<img src="hellfire1.png" alt="">
</div> <!-- #topbanner -->
<div id="texthead">
The Hellfire Co.
</div> <!-- #texthead -->
<div id="slogan">
things that go bang in the night
</div> <!-- #slogan -->
<div id="gofaster1">
<img src="gofast1.png" alt="">
</div> <!-- #gofaster1 -->
<div id="gofaster2">
<img src="gofast1.png" alt="">
</div> <!-- #gofaster2 -->
<div id="gofaster3">
<img src="gofast1.png" alt="">
</div> <!-- #gofaster3 -->
</body>
</html>
