CSS Z-Index

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is above the other. The z-index property can have the following values: auto, number, initial, and inherit.

Basic Usage

div {  z-index: 1;}

In the above example, the div element will have a z-index of 1. The higher the z-index value, the higher up the element will be in the stack order.

Using Z-Index with Position Property

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

div.relative {  position: relative;  width: 400px;  height: 200px;  border: 3px solid #73AD21;  z-index: 1;}
div.absolute {  position: absolute;  top: 80px;  right: 0;  width: 200px;  height: 100px;  border: 3px solid #73AD21;  z-index: 2;}

In this example, the div.absolute element will appear on top of the div.relative element because it has a higher z-index value.

Negative Z-Index Values

The z-index property can also have negative values.

div {  z-index: -1;}

In this example, the div element will have a z-index of -1. Elements with a negative z-index value will appear behind elements with a z-index of 0 or none.

Auto Value

The z-index property can also have a value of auto.

div {  z-index: auto;}

In this example, the stack order of the div element is the same as its parent.