CSS Z-index Property
CSS gives you an opportunity to create layers of various divisions.
The CSS layers refer to applying the z-index property to elements that overlap with each other.
The z-index property is used along with the position property to create an effect of layers.
You can specify which element should come on top and which element should come at bottom.
A z-index property can help you to create more complex web page layouts.
The following example shows how to create layers in CSS.
To change the default stack order positioned elements (position property set to relative, absolute or fixed), use the z-index property.
Syntax -
|
z-index: [ number ] | auto;
|
Explanation of values is given down below-
Number -
An integer value. A higher number is higher on the z-index stack. 0 is the default value. Negative values are allowed.
auto -
Gives the element the same stacking context as its parent. (Default)
Now we will see Example -
Example -
In the example below, a z-index value of 3 puts green on top, a z-index of 2 puts red just under it, and a z-index of 1 puts blue under that.
Html -
CSS-
Output -
