The CSS z-index Property
The z-index property sets the stack order of positioned elements, which decides whether an element sits in front of or behind others.
When elements are positioned, they can overlap. An element can have a positive or negative stack order.
Note: z-index only works on positioned elements (position set to absolute, relative, fixed, or sticky) and on flex items.
Example
A box with z-index: -1 is placed behind the text.
<style> block, position a colored box absolutely at top-left with z-index -1 (stand-in for an image), so it sits behind the text. Add a heading and a paragraph on top of it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.bgbox {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
width: 220px;
height: 140px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<div class="bgbox"></div>
<p>Because the box has a z-index of -1, it is placed behind the text.</p>
</body>
</html>
Another z-index Example
A positioned element with a higher stack order is always in front of one with a lower stack order.
Example
Three overlapping boxes are stacked by their z-index: the gray box (3) is on top, then the green box (2), then the black box (1).
<style> block, make a relative container with three overlapping boxes: a black-box (z-index 1), a gray-box (z-index 3), and a green-box (z-index 2), each positioned so they overlap. The higher z-index appears on top. Add the three boxes inside the container.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="black-box">Black box (z-index: 1)</div>
<div class="gray-box">Gray box (z-index: 3)</div>
<div class="green-box">Green box (z-index: 2)</div>
</div>
</body>
</html>
Without z-index
If overlapping positioned elements have no z-index, they stack in the order they appear in the HTML source: later elements are drawn on top.
Example
The same boxes with no z-index stack in source order.
<style> block, make a relative container with three overlapping boxes (black-box, gray-box, green-box) with no z-index, positioned so they overlap. Without z-index, they stack in the order they appear in the HTML. Add the three boxes inside the container.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
CSS Property
The property covered on this page is z-index, which sets the stack order of a positioned element.