CSS z-index is a property that specifies the stacking order of positioned elements. It determines the order in which elements are stacked on top of each other along the z-axis (perpendicular to the screen).
- Positioned Elements Only: z-index applies only to elements with non-static positioning (absolute, relative, fixed, or sticky).
- Context-Specific: z-index values are relative within a stacking context, which can be affected by factors like parent elements with position set.
- Cautions: High z-index values can affect performance and accessibility, so use them wisely.
Here's an explanation with examples:
Basic Usage
HTML :
<div class="box1"></div>
<div class="box2"></div>
CSS :
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
Browser View
In this example, box2 has a higher z-index value than box1, so it will be stacked on top of box1.
Full Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with CSS Styles</title>
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Negative Values
HTML :
<div class="box1"></div>
<div class="box2"></div>
CSS:
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
z-index: -1;
}
Browser View
In this case, box2 has a negative z-index value. It will be stacked behind box1 and other elements with a z-index of 0 or greater.
Full Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with CSS Styles</title>
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
z-index: -1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Stacking Contexts
HTML :
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
CSS :
.container {
position: relative;
width: 300px;
height: 300px;
}
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
Browser View
In this example, .container acts as a stacking context. Even though box2 has a higher z-index than box1, both are within the same stacking context, so their stacking order will be determined relative to each other.
Full Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with CSS Styles</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
}
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
Example with Text
HTML :
<div class="container">
<div class="box1"></div>
<div class="box2">Stacked Text</div>
</div>
CSS :
.container {
position: relative;
}
.box1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
background-color: blue;
z-index: 2;
}
Browser View
In this case, .box2 contains text. Even though it has a higher z-index than .box1, the text will only be stacked within .box2. The red background of .box1 will still be visible above the text.
Full Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with CSS Styles</title>
<style>
.container {
position: relative;
}
.box1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2">Stacked Text</div>
</div>
</body>
</html>
More Complex Example
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99;">
</div>
<div style="position: relative; z-index: 100;">
</div>
Here, the first div creates a semi-transparent overlay with z-index: 99, while the second div has z-index: 100, placing it on top of the overlay, creating a modal-like effect.
Full Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with CSS Styles</title>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.content {
position: relative;
z-index: 100;
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content"></div>
</body>
</html>
Notes: - z-index only applies to elements with a position value other than static (i.e., relative, absolute, or fixed).
- The z-index property only affects the stacking order within the same stacking context.
- It's essential to consider stacking contexts when dealing with z-index to understand how elements will be stacked relative to each other.
- z-index values can be positive, negative, or zero. A higher value means an element is stacked above elements with lower values. Elements with the same z-index are stacked based on their source order in the HTML.
Conclusion
The CSS property z-index controls the stacking order of positioned elements. Elements with a higher z-index value will be stacked on top of elements with lower values. For instance, if element A has a z-index of 2 and element B has a z-index of 1, element A will be displayed on top of element B even if their positions overlap. If elements have the same z-index, the stacking order will follow the order of appearance in the HTML document.