CSS Z-Index
What is CSS Z-Index?
The CSS z-index property controls the stacking order of positioned HTML elements. When two or more elements overlap, z-index determines which element appears in front and which appears behind. Elements with a higher z-index value are displayed above elements with a lower value.
Why Use CSS Z-Index?
The z-index property is useful for creating overlapping layouts, navigation menus, image overlays, pop-up windows, modal dialogs, tooltips, and floating buttons. It helps organize layered elements and improves the user experience.
How Z-Index Works
Basic Z-Index Syntax
<!DOCTYPE html>
<html>
<head>
<style>
.box{
position:relative;
z-index:1;
}
</style>
</head>
<body>
<div class="box">
Z-Index Example
</div>
</body>
</html>Step 1: Overlapping Elements
The z-index property works only on positioned elements. In this example, the blue box appears above the red box because it has a higher z-index.
<!DOCTYPE html>
<html>
<head>
<style>
.red{
position:absolute;
top:50px;
left:40px;
width:150px;
height:150px;
background:red;
z-index:1;
}
.blue{
position:absolute;
top:90px;
left:90px;
width:150px;
height:150px;
background:blue;
z-index:2;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>Step 2: Place an Element Behind Another
A negative z-index value moves an element behind other positioned elements.
<!DOCTYPE html>
<html>
<head>
<style>
.image{
position:relative;
width:250px;
height:150px;
background:lightblue;
}
.text{
position:absolute;
top:40px;
left:50px;
background:white;
padding:10px;
z-index:1;
}
.background{
position:absolute;
top:20px;
left:20px;
width:200px;
height:100px;
background:orange;
z-index:-1;
}
</style>
</head>
<body>
<div class="image">
<div class="background"></div>
<div class="text">Front Text</div>
</div>
</body>
</html>Step 3: Image Caption Overlay
Z-index is commonly used to display text above images.
<!DOCTYPE html>
<html>
<head>
<style>
.card{
position:relative;
width:320px;
}
img{
width:100%;
}
.caption{
position:absolute;
bottom:10px;
left:10px;
background:rgba(0,0,0,.7);
color:white;
padding:10px;
z-index:5;
}
</style>
</head>
<body>
<div class="card">
<img src="https://picsum.photos/320/200" alt="Image">
<div class="caption">
Beautiful Landscape
</div>
</div>
</body>
</html>Step 4: Floating Notification
A high z-index value keeps notifications and floating buttons above other webpage elements.
<!DOCTYPE html>
<html>
<head>
<style>
.notice{
position:fixed;
top:20px;
right:20px;
background:#28a745;
color:white;
padding:15px;
z-index:999;
}
</style>
</head>
<body>
<div class="notice">
Notification
</div>
</body>
</html>Step 5: Navigation Menu Above Content
Navigation bars often use a high z-index value so they remain above page content.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
background:#007BFF;
color:white;
padding:15px;
z-index:1000;
}
.content{
margin-top:70px;
padding:20px;
}
</style>
</head>
<body>
<div class="navbar">
My Navigation Bar
</div>
<div class="content">
This content appears below the navigation bar.
</div>
</body>
</html>Complete CSS Z-Index Example
<!DOCTYPE html>
<html>
<head>
<style>
.card{
position:relative;
width:350px;
}
img{
width:100%;
}
.badge{
position:absolute;
top:15px;
right:15px;
background:red;
color:white;
padding:8px 14px;
border-radius:5px;
z-index:10;
}
</style>
</head>
<body>
<div class="card">
<img src="https://picsum.photos/350/220" alt="Product">
<div class="badge">
SALE
</div>
</div>
</body>
</html>Advantages of CSS Z-Index
Best Practices
- Apply z-index only to positioned elements.
- Use small z-index values whenever possible.
- Reserve high values (such as 999 or 1000) for menus, modals, and popups.
- Avoid using extremely large z-index values unless necessary.
- Organize stacking levels consistently throughout your project.
- Test overlapping elements on different screen sizes.
- Use comments to document important z-index values in large projects.
- Combine z-index with Position, Flexbox, and Grid for modern layouts.
Web Resources on CSS Z-Index
1. MDN Web Docs : z-index CSS property
2. Web.dev : Z-index and stacking contexts
3. CSS Tricks.com : Systems for z-index
4. Dev.to : Z-Index (CSS), Everything you need to know
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.