CSS z-index Property
CSS z-index is used to control the stacking order of overlapping elements, which decides whether an element appears on top or behind others based on their assigned value.
- It works only on positioned elements (relative, absolute, or fixed).
- Default stacking order applies if no z-index is defined.
- The z-index property can take various values, which we’ll cover below.
Property values
These are the values of the z-index property and their descriptions:
| Value | Description |
|---|---|
auto | The stack order is equal to that of the parent (default). |
number | The stack order depends on the number. |
initial | Sets the property to its default value. |
inherit | Inherits the property from the parent element. |
1. Using z-index with auto
The auto value applies the default stacking order without explicitly defining the stacking context.
<style>
div {
position: relative;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: auto;
top: 50px;
left: 50px;
position: absolute;
}
.box2 {
background-color: blue;
top: 70px;
left: 70px;
position: absolute;
}
</style>
- The red box (.box1) and blue box (.box2) overlap.
- Since both boxes have their z-index set to auto, the default stacking order applies, and the blue box is rendered on top because it comes later in the DOM.
2. Using z-index with Numbers
Specifying numerical values controls the stacking order. Higher values stack above lower ones.
<style>
div {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: blue;
z-index: 2;
top: 70px;
left: 70px;
}
</style>
The blue box (z-index: 2) appears above the red box (z-index: 1).
3. Using z-index with initial
The initial value resets the z-index to its default value of auto.
<style>
div {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: initial;
top: 50px;
left: 50px;
}
.box2 {
background-color: blue;
z-index: 1;
top: 70px;
left: 70px;
}
</style>
The red box follows the default stacking order since z-index: initial resets to auto.
4. Using z-index with inherit
The inherit value ensures the element inherits its z-index value from its parent.
<style>
.parent {
position: relative;
z-index: 5;
}
.child {
position: absolute;
width: 100px;
height: 100px;
background-color: yellow;
z-index: inherit;
top: 50px;
left: 50px;
}
</style>
The child element inherits the z-index value (5) from its parent.
5. Combining z-index with Multiple Contexts
When working with multiple stacking contexts, the z-index applies only within its context.
<style>
.parent {
position: relative;
z-index: 1;
background-color: lightgray;
width: 200px;
height: 200px;
}
.child1 {
position: absolute;
z-index: 2;
background-color: red;
width: 100px;
height: 100px;
}
.child2 {
position: absolute;
z-index: 1;
background-color: blue;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
}
</style>
The red box stacks above the blue box within the same stacking context defined by the parent element.
CSS z-index Property – FAQs
What is the z-index property in CSS?
The z-index property determines the stacking order of positioned elements on a webpage, controlling which elements appear in front of or behind others.
How does z-index affect overlapping elements?
Elements with higher z-index values are displayed above those with lower values when they overlap. This property only works on elements with a position value other than static.
Can z-index have negative values?
Yes, assigning a negative z-index value positions an element behind others with non-negative z-index values, allowing for more complex layering.
Why isn’t my z-index working as expected?
Ensure the element has a position property set to relative, absolute, fixed, or sticky, as z-index does not apply to statically positioned elements.
What is a stacking context in CSS?
A stacking context is a hierarchy of elements with a common parent that determines their z-index ordering. Certain properties, like position and z-index, can create new stacking contexts, affecting how elements are layered
