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
Overlapping Elements with Z-Index using CSS
The CSS z-index property allows you to control the stacking order of overlapping elements. Elements with higher z-index values appear in front of elements with lower values, creating layered effects on your webpage.
Syntax
selector {
z-index: value;
position: relative | absolute | fixed | sticky;
}
Note: The z-index property only works on positioned elements (elements with position other than static).
Possible Values
| Value | Description |
|---|---|
auto |
Default stacking order (same as parent) |
integer |
Positive or negative number defining stack order |
inherit |
Inherits z-index from parent element |
Method 1: Using Positive Z-Index Values
With positive z-index values, higher numbers appear on top. This is the most common approach for layering elements −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
width: 300px;
}
.box {
height: 120px;
width: 120px;
position: absolute;
}
.green-box {
background-color: #04af2f;
top: 20px;
left: 20px;
z-index: 1;
}
.black-box {
background-color: black;
top: 60px;
left: 60px;
z-index: 2;
}
.purple-box {
background-color: rgb(212, 182, 239);
top: 100px;
left: 100px;
z-index: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="box green-box"></div>
<div class="box black-box"></div>
<div class="box purple-box"></div>
</div>
</body>
</html>
Three overlapping colored boxes appear with the purple box on top (z-index: 3), black box in the middle (z-index: 2), and green box at the bottom (z-index: 1).
Method 2: Using Negative Z-Index Values
Negative z-index values place elements behind their parent or behind elements with z-index: 0. Less negative numbers appear on top of more negative numbers −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
width: 300px;
background-color: #f0f0f0;
padding: 20px;
}
.box {
height: 120px;
width: 120px;
position: absolute;
}
.green-box {
background-color: #04af2f;
top: 40px;
left: 40px;
z-index: -1;
}
.black-box {
background-color: black;
top: 80px;
left: 80px;
z-index: -2;
}
.purple-box {
background-color: rgb(212, 182, 239);
top: 120px;
left: 120px;
z-index: -3;
}
</style>
</head>
<body>
<div class="container">
<div class="box green-box"></div>
<div class="box black-box"></div>
<div class="box purple-box"></div>
</div>
</body>
</html>
Three overlapping colored boxes appear with the green box on top (z-index: -1), black box in the middle (z-index: -2), and purple box at the bottom (z-index: -3).
Key Points
- Z-index only works on positioned elements (position: relative, absolute, fixed, or sticky)
- Higher z-index values appear in front of lower values
- Default z-index is auto (equivalent to 0)
- Negative values place elements behind the default stacking layer
Conclusion
The z-index property is essential for controlling element layering in CSS. Use positive values for standard stacking and negative values when you need elements behind the default layer.
12K+ Views
