There are several reasons to have content overlaid on a website such as ratings or text on images, statistical information on charts, text on icons, to name just a few. The technique to do so is simple and scalable.

Below is a very simple example of overlaying divs but can be used for almost any content!

The HTML

<div id="container">
<div id="layer1"><p>Layer 1</p></div>
<div id="layer2"><p>Layer 2</p></div>
<div id="layer3"><p>Layer 3</p></div>
</div>

The CSS

div{font-family:Verdana, Geneva, sans-serif; font-weight:bold;text-align:center; color:#fff; border:thin solid #999}
div>p{margin-top:65px;}

#container{width:300px; height:275px; margin:auto auto; position:relative; background:#CCC;}
#layer1, #layer2, #layer3{width:150px; height:150px; position:absolute;}
#layer1{top:15px; left:15px; background:#00f;}
#layer2{top:110px; left:75px; background:#0f0; z-index:1;}
#layer3{top:15px; left:125px; background:#f00; z-index:2;}

Notes

The layer in which the sublayers are contained requires relative positioning while the lower layers have to be absolute positioned.

Each layer needs to have an incremental z-index value set with zero (0) being the default for the lowest, containing, layer. For this reason it is generally easier to have each layer styled by ID as a reminder that they are seperate entities.

It’s a super simple idea with many uses that every webmaster should know!