The CSS z-index property controls the stacking order of elements on a web page. The stacking order determines which elements appear in front of or behind others when they overlap. This property is essential for managing the visual arrangement of elements, especially in complex layouts where multiple elements share the same space.
Z-axis: The z-index controls the depth of elements, determining how elements are stacked along the z-axis (the third dimension of a webpage).
Stacking Order: Elements with a higher z-index value are displayed in front of elements with a lower value.
selector {
z-index: value;
}
value can be a positive integer, negative integer, or zero.
<!DOCTYPE html>
<html>
<head>
<title>CSS Z-Index Example</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
opacity: 0.5;
}
.box1 {
background-color: red;
left: 50px;
top: 50px;
z-index: 1;
}
.box2 {
background-color: green;
left: 100px;
top: 100px;
z-index: 2;
}
.box3 {
background-color: blue;
left: 150px;
top: 150px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>
• An element with a position value other than static and a z-index value other than auto.
• An element with opacity less than 1.
• Elements with transform, filter, perspective, or clip-path properties set to values other than none.
Within a stacking context, the z-index values of child elements are compared only within that context, not with elements outside of it.
• Background and borders of the root element.
• Descendant elements with negative z-index.
• Non-positioned, non-floating block elements in the order they appear.
• Positioned elements (relative, absolute, fixed, or sticky) in order of their z-index.
Elements with negative z-index values are placed below those with positive values but above the background and borders of the root element.
static: Default positioning, no stacking context.
relative, absolute, fixed, sticky: Create a new stacking context if z-index is set.
Elements with position: sticky behave like relative until they reach a threshold, then behave like fixed. They can also have a z-index to control their stacking order.
The z-index value of a child element is relative to the stacking context of its parent. Changes in the parent's z-index affect the child's stacking order within that context.
Elements with transparent backgrounds or opacity less than 1 can affect the stacking order. Transparent areas allow elements behind them to be visible, influencing the visual layering.
<!DOCTYPE html>
<html>
<head>
<title>CSS Z-Index and Stacking Contexts</title>
<style>
.parent {
position: relative;
z-index: 1;
background-color: yellow;
padding: 20px;
}
.child {
position: absolute;
z-index: 2;
background-color: pink;
width: 100px;
height: 100px;
}
.sibling {
position: relative;
z-index: 3;
background-color: lightblue;
width: 100px;
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child">Child</div>
</div>
<div class="sibling">Sibling</div>
</body>
</html>