CSS z-index

The z-index in CSS allows us to define a visual hierarchy on the 3-dimensional plane, i.e., the z-axis. It is used to specify the stacking order of the positioned elements (elements whose position value is either fixed, absolute, relative, or sticky). The stacking order means that the element's position along the z-axis, which is perpendicular to the screen.

It defines the element's order if they overlap each other.

Syntax

Possible values

number: It means that the element's stack level is set to the given value. It allows negative values.

auto: It means that the order of the stack is equivalent to the parent, i.e., default.

Let's understand it by using an illustration.

Example