In this chapter, we will learn about the CSS z-index property. The z-index property controls the stack order of positioned elements. It determines which elements appear in front of or behind other elements. Understanding z-index is crucial for managing overlapping elements and creating layered designs. We will cover:
- Introduction to the z-index Property
- How z-index Works
- Setting z-index Values
- Negative z-index Values
- Z-Index and Positioning
- Stacking Context
- Examples of Using z-index
Introduction to the z-index Property
The z-index property specifies the stack order of an element. An element with a higher z-index is displayed in front of an element with a lower z-index. The z-index property only works on positioned elements (those with a position value other than static).
Syntax
element {
z-index: value;
}
How z-index Works
When elements overlap, the z-index property determines which element appears on top. The stacking order is influenced by the z-index value: elements with higher z-index values are stacked above those with lower values.
Example
div {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: 1;
}
div.overlay {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 2;
}
HTML
<div>This is a lower z-index element.</div>
<div class="overlay">This is a higher z-index element.</div>
In this example, the .overlay element appears in front of the first <div> because it has a higher z-index value.
Setting z-index Values
You can set the z-index property to any integer value, positive or negative. Elements with higher positive values appear in front of those with lower values, while elements with negative values appear behind other elements.
Example
div {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: 0;
}
div.middle {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background-color: lightgreen;
z-index: 1;
}
div.top {
position: absolute;
top: 90px;
left: 90px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 2;
}
HTML
<div>This is a z-index 0 element.</div>
<div class="middle">This is a z-index 1 element.</div>
<div class="top">This is a z-index 2 element.</div>
Negative z-index Values
Negative z-index values place an element behind other elements with non-negative values.
Example
div {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: -1;
}
div.overlay {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 1;
}
HTML
<div>This is a negative z-index element.</div>
<div class="overlay">This is a positive z-index element.</div>
In this example, the first <div> is placed behind the .overlay element because it has a negative z-index value.
Z-Index and Positioning
The z-index property only works on positioned elements. An element must have a position value of relative, absolute, fixed, or sticky for z-index to take effect.
Example
div.static {
position: static;
z-index: 1;
background-color: lightblue;
}
div.relative {
position: relative;
z-index: 2;
background-color: lightcoral;
}
HTML
<div class="static">This is a statically positioned element.</div>
<div class="relative">This is a relatively positioned element with a higher z-index.</div>
In this example, the z-index property has no effect on the statically positioned element.
Stacking Context
A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. Each stacking context is self-contained: after the elements in a local stacking context are ordered, the whole context is considered as a single element in the parent stacking context.
Creating a Stacking Context
A new stacking context is created by any element that has a z-index value other than auto and a position value other than static.
Example
.parent {
position: relative;
z-index: 1;
background-color: lightgray;
padding: 20px;
}
.child {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: 2;
}
.sibling {
position: absolute;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 3;
}
HTML
<div class="parent">
<div class="child">Child element</div>
<div class="sibling">Sibling element</div>
</div>
In this example, the .child and .sibling elements are within the same stacking context created by the .parent element.
Examples of Using z-index
Example 1: Layered Elements
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: 1;
}
.box2 {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background-color: lightgreen;
z-index: 2;
}
.box3 {
position: absolute;
top: 90px;
left: 90px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 3;
}
HTML
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
Example 2: Negative z-index
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: -1;
}
.overlay {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background-color: lightcoral;
z-index: 1;
}
HTML
<div class="box">Box with negative z-index</div>
<div class="overlay">Box with positive z-index</div>
Conclusion
In this chapter, you learned about the CSS z-index property, including how it works, how to set positive and negative z-index values, and how z-index interacts with positioned elements. You also learned about stacking context and how it affects the stacking order of elements. Understanding the z-index property is essential for managing overlapping elements and creating layered designs.