CSS z-index property defines the stacking order of the positioned elements. An element is called a positioned element if it has its position other than static.
An element having a higher z-index value always covers the element with a lower z-index value. See the stacked elements below:
z-index: 10
z-index: 8
z-index: 6
z-index: 6
z-index: 8
z-index: 10
Example:
div{
position: absolute;
z-index: -1;
}
Here are few points to keep in mind while using the z-index property:
- z-index only works with the positioned elements. An element is called positioned if it has its position except
static. - An element having a higher z-index always covers the element having a lower z-index.
CSS Syntax
The z-index property has the following syntax:
z-index: auto | integer | initial | inherit;
Property Values
The z-index property accepts the following values:
| auto | Specifies the same stacking order as the parent element. This is the default value. |
| integer | Specifies the stacking order of the current element. It can be positive, negative, or zero. |
| initial | Sets the z-index property to its default value. Which is auto. |
| inherit | Inherits the z-index property from the parent element. |
General Info
| Default Value | auto |
| Inherited | No |
| JavaScript Usage | element.style.zIndex = “-1” |
