CSS Z-index
The z-index property specifies the stack order of an element. An element with a greater stack order is always in front of an element with a lower stack order.
How Z-index Works
The z-index property only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). It can have the following values:
auto: Sets the stack order equal to its parents.- number: Sets the stack order of the element. Negative numbers are allowed.
Example
css
.container {
position: relative;
}
.black-box {
position: absolute;
z-index: 1;
}
.gray-box {
position: absolute;
z-index: 2; /* gray-box will be on top */
}
.green-box {
position: absolute;
z-index: 3; /* green-box will be on top */
}Test Yourself with an Exercise
An element with a larger z-index will be placed in front of an element with a smaller z-index.