z-index

The z-index property sets the order in which the browser draws tags. By default, the browser draws tags in the order in which they appear; tags that appear later in the page appear over the top of earlier ones. The z-index property lets you control the order in which you want things layered; tags are drawn from lowest to highest z-index values.

For example, you have the following styles:

h1 {position: relative;left: 10px; top: 0px; z-index: 2;}
h2 {position: relative;left: 30px; top: -45px; z-index: 1;}

You then use the headings on the page:

In the example below, both paragraphs are at almost the same absolute location on the page. The second paragraph is 10 pixels lower than the first. Normally, the second tag would be put on top of the first tag, but you can override this by setting the z-index properties for the tags.

You have the following styles:

p.over {position: absolute;left: 20px; top: 80px; 
             z-index: 2; background-color:gray}
p.under {position: absolute;left: 20px; top: 90px; 
             z-index: 1;background-color:red}

You use the styles on the page: