The z-index property in CSS controls the vertical stacking order of elements that overlap. An element with a higher z-index will appear in front of an element with a lower one. A stacking context is formed when an element has a position value other than static and a z-index value other than auto, among other properties. This creates a new local stacking order for its descendant elements, which is then treated as a single unit in the parent's stacking context.
Example 1: Basic Stacking
/* style.css */
.box {
position: absolute;
width: 100px;
height: 100px;
}
.red-box {
background-color: red;
z-index: 1; /* Appears on top */
}
.blue-box {
background-color: blue;
top: 50px;
left: 50px;
z-index: 0; /* Appears behind the red box */
}
Explanation The .red-box has a higher z-index than the .blue-box, so it is rendered on top. Both elements require a position property for z-index to have an effect.
Example 2: Nested Stacking Context
/* style.css */
.parent {
position: relative;
z-index: 1;
background-color: lightgray;
padding: 20px;
}
.child {
position: absolute;
width: 80px;
height: 80px;
background-color: coral;
z-index: 999; /* High z-index but contained within parent */
}
.sibling {
position: absolute;
top: 0;
left: 70px;
width: 100px;
height: 100px;
background-color: darkcyan;
z-index: 2; /* Higher than .parent */
}
Explanation Even though .child has a very high z-index, it is still rendered behind .sibling. This is because .child is within the stacking context of .parent, which has a lower z-index than .sibling.
Example 3: Opacity Creates a Stacking Context
/* style.css */
.element-one {
position: relative;
z-index: 2;
background-color: lightgreen;
width: 120px;
height: 120px;
}
.element-two {
position: absolute;
top: 30px;
left: 30px;
width: 120px;
height: 120px;
background-color: mediumpurple;
opacity: 0.9; /* Creates a new stacking context */
z-index: 1;
}
Explanation Setting the opacity of .element-two to a value less than 1 creates a new stacking context. Even with a lower z-index, it can affect the stacking order of its children independently.
Example 4: Transform Creates a Stacking Context
/* style.css */
.container-a {
position: absolute;
z-index: 3;
}
.box-a {
width: 100px;
height: 100px;
background-color: gold;
}
.container-b {
position: absolute;
top: 50px;
left: 50px;
transform: scale(1.1); /* Creates a new stacking context */
z-index: 2;
}
.box-b {
width: 100px;
height: 100px;
background-color: deeppink;
}
Explanation The transform property on .container-b creates a new stacking context. Despite .container-a having a higher z-index, .container-b and its child will be rendered based on this new context.
Example 5: The isolation Property
/* style.css */
.isolated-context {
isolation: isolate; /* Creates a new stacking context without position/z-index */
position: absolute;
background-color: lightblue;
padding: 25px;
}
.inner-element {
position: absolute;
width: 70px;
height: 70px;
background-color: crimson;
z-index: -1; /* Will not go behind the body */
}
Explanation The isolation: isolate property creates a new stacking context on .isolated-context. This prevents the negatively z-indexed .inner-element from disappearing behind the parent element's own background.
Example 6: Default Stacking Order
/* style.css */
.first-element {
position: relative;
width: 150px;
height: 150px;
background-color: orange;
/* No z-index, defaults to auto (0) */
}
.second-element {
position: absolute;
top: 75px;
left: 75px;
width: 150px;
height: 150px;
background-color: teal;
/* No z-index, defaults to auto (0) */
}
Explanation When positioned elements have the same z-index (or none is specified), the element that comes later in the HTML source order will appear on top. Here, .second-element stacks on top of .first-element.
Example 7: Negative z-index
/* style.css */
.parent-container {
position: relative;
background-color: #eee;
padding: 40px;
}
.foreground {
position: relative;
z-index: 1;
background-color: cornflowerblue;
padding: 20px;
color: white;
}
.background {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 100px;
background-color: #333;
z-index: -1; /* Goes behind its parent's content */
}
Explanation A negative z-index places an element behind its parent. In this case, .background is positioned behind the content and background of its parent, .parent-container.