Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Difference between auto, 0 and no z-index
The CSS z-index property controls the stacking order of positioned elements on the z-axis (depth). Understanding the differences between auto, 0, and no z-index is crucial for proper element layering.
Syntax
selector {
z-index: auto | integer | initial | inherit;
}
Z-Index Values
| Value | Description | Behavior |
|---|---|---|
auto |
Default value | Same stacking level as parent, no new stacking context |
0 |
Integer value | Creates new stacking context at level 0 |
| No z-index | Property not specified | Behaves like auto
|
| Positive integer | Numbers like 1, 2, 3 | Higher values stack above lower values |
| Negative integer | Numbers like -1, -2, -3 | Stacks below elements with z-index 0 or auto |
Example: Z-Index Auto vs 0 vs No Value
The following example demonstrates the difference between auto, 0, and no z-index
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
margin: 20px;
}
.box {
position: absolute;
width: 150px;
height: 100px;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.auto-box {
background-color: #ff6b6b;
top: 50px;
left: 50px;
z-index: auto;
}
.zero-box {
background-color: #4ecdc4;
top: 80px;
left: 80px;
z-index: 0;
}
.no-zindex-box {
background-color: #45b7d1;
top: 110px;
left: 110px;
/* No z-index specified */
}
</style>
</head>
<body>
<div class="container">
<div class="box auto-box">z-index: auto</div>
<div class="box zero-box">z-index: 0</div>
<div class="box no-zindex-box">No z-index</div>
</div>
</body>
</html>
Three overlapping boxes appear: red (z-index: auto), teal (z-index: 0), and blue (no z-index). The blue box appears on top because it comes last in the HTML source order, followed by teal, then red at the bottom.
Example: Stacking Context Creation
This example shows how z-index: 0 creates a new stacking context while auto does not
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #333;
margin: 20px;
}
.child {
position: absolute;
width: 100px;
height: 60px;
color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.parent-auto {
z-index: auto;
}
.parent-zero {
z-index: 0;
}
.child1 {
background-color: #e74c3c;
top: 20px;
left: 20px;
z-index: 10;
}
.child2 {
background-color: #2ecc71;
top: 50px;
left: 50px;
z-index: 5;
}
</style>
</head>
<body>
<div class="parent parent-auto">
<div class="child child1">Child z:10</div>
<div class="child child2">Child z:5</div>
</div>
<div class="parent parent-zero">
<div class="child child1">Child z:10</div>
<div class="child child2">Child z:5</div>
</div>
</body>
</html>
Two gray containers each with red and green child boxes. In both containers, the red box (z-index: 10) appears above the green box (z-index: 5), demonstrating that child element stacking works the same whether the parent has z-index: auto or z-index: 0.
Key Differences
- auto Does not create a new stacking context, inherits parent's stacking level
- 0 Creates a new stacking context at level 0, isolates child elements
-
No z-index Behaves identically to
auto - Stacking order When z-index values are equal, source order determines stacking
Conclusion
Understanding z-index behavior is essential for proper element layering. While auto and no z-index behave identically, z-index: 0 creates a new stacking context, which can affect how child elements interact with the broader page layout.
Updated on: 2026-03-15T15:52:21+05:30
298 Views
Advertisements