z-index Example CSS and HTML

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.
Below is the HTML used in my z-index example. As you can see, all it uses are a few DIV tags.

1

2

3

right content

left content

right 2 - corrected

left corrected

This is content where the right content lists first with no z-index.

And here we have content where the right content lists first with a higher z-index.

And finally, three boxes piled one on top of the other.

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.

View the original article here