The z-index Property

When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

Blue
Red

The red box overlaps the blue box, because it was placed later in the HTML markup. The z-index property can change this order.

Assigning the z-index Property

Assigning a higher z-index value to the blue div and a lower z-index value to the red div will result in the following:

Lime


Purple

The z-index works only on positioned elements (position: absolute, position: relative, or positon: fixed).