When you use CSS positioning to place elements on your web page, you can get very precise pages, but without the z-index style property, your elements will overlap with sometimes disastrous results.
Return to Z-Index - Positioning Overlapping Elements with Cascading Style Sheets article.
View the Z-Index Example Page.
The HTML
Below is the HTML used in my z-index example. As you can see, all it uses are a few DIV tags.
<div id="ontop">1</div>
<div id="inmiddle">2</div>
<div id="onbottom">3</div>
<div id="rightside">right content</div>
<div id="leftside">left content </div>
<div id="right2">right 2 - corrected</div>
<div id="left2">left corrected</div>
<div id="inst1">This is content where the right content lists first with no z-index.</div>
<div id="inst2">And here we have content where the right content lists first with a higher z-index.</div>
<div id="inst3">And finally, three boxes piled one on top of the other.</div>
The CSS
Then I added the following CSS to position the DIVs and then stack them so they display correctly.
div#ontop {
background-color: #CC0000;
z-index: 50;
top: 400px;
position: absolute;
left: 200px;
width: 100px;
height:100px;
}
div#inmiddle {
background-color: #66FFFF;
z-index: 25;
top: 400px;
position: absolute;
left: 100px;
width:300px;
height:100px;
}
div#onbottom {
background-color: #CCCCCC;
top: 400px;
position: absolute;
left: 0px;
width:500px;
height:100px;
}
div#leftside {
background-color: #CCCCCC;
top: 50px;
position: absolute;
left: 0px;
width:200px;
height:100px;
}
div#rightside {
background-color: #fff;
border:1px solid #000;
top: 50px;
position: absolute;
left: 180px;
width:200px;
height:100px;
}
div#left2 {
background-color: #CCCCCC;
top: 200px;
position: absolute;
left: 0px;
width:200px;
height:100px;
z-index:0;
}
div#right2 {
background-color: #fff;
border:1px solid #000;
top: 200px;
position: absolute;
left: 180px;
width:200px;
height:100px;
z-index:1;
}
div#inst1 {
position:absolute;
top:30px;
}
div#inst2 {
position:absolute;
top:180px;
}
div#inst3 {
position:absolute;
top:380px;
}
div#return {
position: absolute;
top: 520px;
}
Return to Z-Index - Positioning Overlapping Elements with Cascading Style Sheets article.
View the Z-Index Example Page.
