CSS z-index property
Description
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.
Syntax
z-index : integer | auto
Property values
autoDefault
-
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.
z-index: auto;
integer
-
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.
z-index: 1;
Applicable to
It applies to all absolutely positioned elements (elements with position:absolute; property).
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
