Layers & Z-Index
CSS layers refer to applying the z-index property to elements that overlap with each other. You set the z-index by using the z-index attribute. Setting this to a positive value causes the element to be stacked on top of other elements; negative values cause it to be stacked below.
If two elements have the same z-index, their source order determines the stacking (the last element is stacked highest).
Comparing the three images below you will see that the images are made up of three layers, one laying on top of the other. The difference is they have had there layers put in a different order using z-index.
Style
<div style="background-color:yellow; width:100px; height:100px; position:relative; top:0px; left:35px; border:2px solid #000000; z-index:2"></div> <iv style="background-color:red; width:100px; height:100px; position:relative; top:-70px; left:80px; border:2px solid #000000; z-index:1"></div> <div style="background-color:blue; width:100px; height:100px; position:relative; top:-120px; left:25px; border:2px solid #000000; z-index:3"></div><div style="background-color:yellow; width:100px; height:100px; position:relative; top:-312px; left:240px; border:2px solid #000000; z-index:1"></div> <div style="background-color:red; width:100px; height:100px; position:relative; top:-382px; left:290px; border:2px solid #000000; z-index:2"></div> <div style="background-color:blue; width:100px; height:100px; position:relative; top:-432px; left:230px; border:2px solid #000000; z-index:1"></div>
<div style="background-color:yellow; width:100px; height:100px; position:relative; top:-625px; left:450px; border:2px solid #000000; z-index:3"></div> <div style="background-color:red; width:100px; height:100px; position:relative; top:-695px; left:480px; border:2px solid #000000; z-index:2"></div> <div style="background-color:blue; width:100px; height:100px; position:relative; top:-750px; left:440px; border:2px solid #000000; z-index:1"></div>
2006 CSS Magpie.