Overlapping elements

When positioned outside the normal flow elements, we can have overlapping elements.

To specify which element lies above the other, we use "z-index". Elements with higher z-index value will be above those with lower value.

This can be useful, if we make a headline with text below and add a background image.

<style type="text/css"> img { position:absolute; left:0px; top:0px; z-index:-1; } </style> <h1>This is a heading</h1> <img src="imageheading.jpg" />

The image "imageheading.jpg" is placed in the upper left corner and overlaps with the text "This is a heading".

As the image has a value of -1 for "z-index", lag behind in any overlap, and therefore remain as a background image of the text "This is a heading".