Categories
CSS z-index is a property used to control the stacking order of positioned elements on a web page. When elements overlap, the z-index property determines which element appears in front of the others. The higher the z-index value, the closer the element is to the viewer, and it will appear in front of elements with lower z-index values.
Syntax
selector {
z-index: value;
}
How to Use z-index:
1. Assigning a Higher z-index to an Element:
- To bring an element in front of other overlapping elements, give it a higher
z-indexvalue. Elements with a higherz-indexvalue will appear on top of elements with lower or defaultz-indexvalues.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Z-index Example 1</title>
<style>
.red-box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
.blue-box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 80px;
left: 80px;
/* default z-index is auto (0) */
}
</style>
</head>
<body>
<div class="red-box"></div>
<div class="blue-box"></div>
</body>
</html>
In this example, the .red-box div has a z-index of 1, and the .blue-box div has the default z-index value (0). As a result, the red box appears on top of the blue box.
2. Negative z-index:
- You can use negative
z-indexvalues to position elements behind other elements, which can be particularly useful when working with layered designs.
Example
<!DOCTYPE html>
<html>
<head>
<title>Z-index Example 2</title>
<style>
.red-box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: -1;
}
.blue-box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 80px;
left: 80px;
/* default z-index is auto (0) */
}
</style>
</head>
<body>
<div class="red-box"></div>
<div class="blue-box"></div>
</body>
</html>
In this example, the .red-box div has a negative z-index of -1, and the .blue-box div has the default z-index value (0). The red box appears behind the blue box due to its negative z-index.
3. Layering Multiple Elements:
- You can use
z-indexto control the stacking order of multiple overlapping elements to create complex layouts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Z-index Example 3</title>
<style>
.red-box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
.blue-box {
width: 120px;
height: 120px;
background-color: blue;
position: absolute;
top: 80px;
left: 80px;
z-index: 2;
}
.green-box {
width: 140px;
height: 140px;
background-color: green;
position: absolute;
top: 110px;
left: 110px;
z-index: 3;
}
</style>
</head>
<body>
<div class="red-box"></div>
<div class="blue-box"></div>
<div class="green-box"></div>
</body>
</html>
In this example, we have three boxes with different z-index values. The green box appears on top of the blue and red boxes because it has the highest z-index.
It is important to remember that the z-index property only works on elements with position: relative;, position: absolute;, position: fixed;, or position: sticky;. Additionally, z-index only affects elements within the same stacking context. If an element is not in the same stacking context, its z-index will not influence the stacking order of other elements. Understanding the stacking context is important for managing complex layouts with z-index.