When two or more elements overlap on a page, one of them must be position above the other. You can control which elements are higher in the page stack using the z-index style attribute.

This attribute takes a numeric value, with higher numbers indicating an element higher in the stack.

This example shows two overlapping divs. Look at the source code and compare the z-index values in the style rules for the two divs. Try changing the values and see the effect on the overlaps.

A more complex example using z-index combined with JavaScript to change the relative ordering can be found here. Notice how the different CD covers come to the top as you hover the mouse over different track titles.

Back Return to the main CSS Position page.