z-index

z-index

z-index the order of the elements on the z-axis. It only works on positioned elements (anything apart from static).

z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. it only affects elements that have a position value other than static (the default).

Default value of z-index is auto.

The order is defined by the order in the HTML code:

• first in the code = behind
• last in the code = in front

z-index: auto;

The order is defined by the order in the HTML code:

• first in the code = behind
• last in the code = in front

See below pen to understand.

See the Pen
CSS Property z-index auto by Mukesh Singh (@codecad)
on CodePen.

z-index: 1;

The z-index value is relative to the other ones. The target element is move in front of its siblings.

see below pen.

See the Pen
CSS Property z-index 1 by Mukesh Singh (@codecad)
on CodePen.

z-index: -1;

You can use negative values. The target element is move in behind its siblings.

see below pen.

See the Pen
CSS Property z-index:-1 by Mukesh Singh (@codecad)
on CodePen.

Browser Support