z-index PropertyThe z-index property in CSS controls the stacking order of elements that overlap each other. Elements with a higher z-index value are positioned in front of elements with a lower z-index value. It only works on elements that have a positioned property (position: relative, absolute, fixed, or sticky).
Before diving into z-index, it’s important to understand the concept of stacking context. A stacking context is a three-dimensional conceptual layer in which elements are stacked according to their z-order. A new stacking context is created in certain situations, such as when position, z-index, or other properties (like opacity) are applied.
z-index:position property of relative, absolute, fixed, or sticky for z-index to work.z-index value can be a positive or negative integer or zero.
auto (which is essentially 0).z-index in ActionHere are the primary use cases for the z-index property:
When elements overlap each other, their z-index determines which element is displayed in front.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 2; /* Higher z-index, so this box appears on top */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
In this example:
.box1 is red and has z-index: 1..box2 is blue and has z-index: 2..box2 has a higher z-index, it will overlap .box1 when they intersect.z-indexIf you use a negative z-index, the element will appear behind other elements with higher z-index values.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50px;
left: 50px;
z-index: -1; /* This box appears behind other elements */
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Here, .box1 has z-index: -1, so it will be positioned behind .box2 even though it is defined before it in the HTML.
Child elements do not necessarily inherit the z-index of their parents. Each element that has a z-index creates its own stacking context. Elements inside a stacking context are stacked relative to each other but not to elements outside their parent context.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 300px;
height: 300px;
background-color: lightblue;
position: relative;
z-index: 10;
}
.child {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 50px;
z-index: 5; /* Within the parent stacking context */
}
.sibling {
width: 100px;
height: 100px;
background-color: lime;
position: absolute;
top: 100px;
left: 200px;
z-index: 1; /* Lower z-index than the parent */
}
</style>
</head>
<body>
<div class="parent">
Parent Element
<div class="child">Child Element</div>
</div>
<div class="sibling">Sibling Element</div>
</body>
</html>
In this case:
parent div has a higher z-index than the sibling div, so it will appear above the sibling.child div has a z-index relative to the parent.z-index Effectivelyz-index when you want to control the overlap of multiple elements, such as dropdown menus, modals, or pop-ups.z-index.z-index Values: It’s easy to misuse z-index and create a confusing layout. Instead of setting arbitrary large numbers, try to structure the layout so that each element has a clear stacking order.To help solidify the concept of z-index, try the following exercise:
Objective: Create a webpage with three overlapping boxes (red, blue, and green). Using z-index, make the red box appear in front, the blue box in the middle, and the green box behind. Additionally, add a fixed-position header with a higher z-index that stays on top as you scroll.
position: absolute so they overlap.z-index values to layer them.position: fixed header that always stays on top.Bonus: Add a modal pop-up box that opens on click and appears above all other elements using a high z-index.
.