CSS z-index property
CSS z-index property defines the stack order of an element in the stacking context. We can imagine a stacking context as a layer of boxes. z-index property actually forms a new stacking context i.e. a new layer of boxes.
As the value of z-index increases, the new layers are also created laying over each other starting from bottom.
We take the example of two elements i.e. red and green boxes. These two elements have been absolutely positioned.
z-index : integer | auto
It does not create a new stacking context i.e. 0 stack order for the current element.
The following value applies to the red box that constitutes 0 stack order.
An integer establishes a new stacking context and represents the stack order of an element.
The following value applies to the red box and defines a new stacking context. That's why you can see the red box closer to your eye than the green box.
It applies to all absolutely positioned elements (elements with position:absolute; property).
Was this article helpful?