2.1 z-index Property
Stacking Context in CSS is managed by the z-index property and determines how elements stack on top of each other along the Z axis (the third coordinate, perpendicular to the screen). Understanding and properly using z-index and stacking context allows you to create complex and dynamic layouts with overlapping elements.
Basics of Stacking Context
Stacking context determines how elements are displayed on top of one another. Each element on a webpage has a stacking level that can be changed using the z-index property.
Stacking Rules
- Position in the document tree: Elements lower in the document tree are stacked above elements that are higher.
- Property
z-index: Elements with a higherz-indexvalue are stacked above elements with a lowerz-indexvalue.
Basics of z-index
The z-index property defines the stacking order of elements when they overlap. Elements with a higher z-index value appear above those with a lower value. z-index is applied only to positioned elements (position: relative, absolute, fixed, or sticky).
Syntax:
.element {
position: relative; /* or absolute, fixed, sticky */
z-index: number;
}
Where:
-
number: an integer that can be positive or negative. The greater the value, the higher the element is in stacking order
Example of using z-index:
In this example, Box 2 with z-index: 2; will display on top of Box 1 and Box 3, and Box 1 will display on top of Box 3.
.wrapper {
min-height: 300px;
}
.box {
position: absolute;
min-width: 125px;
min-height: 125px;
color: white;
}
.box1 {
z-index: 1;
top: 50px;
left: 50px;
background-color: red;
}
.box2 {
z-index: 2;
top: 100px;
left: 100px;
background-color: blue;
}
.box3 {
z-index: 0;
top: 150px;
left: 150px;
background-color: green;
}
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
2.2 Stacking Context
Stacking Context is a group of elements treated as a unit when determining the stacking order. A stacking context is created when certain conditions are met, such as applying z-index with positioning or having other CSS properties.
Creating a Stacking Context
A stacking context is created in the following cases:
- An element has
relative,absolute,fixed, orstickypositioning with az-indexvalue other thanauto. - An element has an
opacityproperty with a value less than 1. - An element has a
transform,filter,perspective,clip-path,mask, ormask-imageproperty with a value other than the default. - An element has a
containproperty withlayout,paint, orstrictvalue.
Example of creating a stacking context:
.parent {
position: relative;
z-index: 10;
min-height: 300px;
padding: 20px;
color: white;
background-color: #f1c40f;
}
.child-blue {
position: absolute;
z-index: 1;
top: 50px;
left: 50px;
min-width: 125px;
min-height: 125px;
background-color: #3498db;
}
.child-red {
position: absolute;
z-index: 2;
top: 100px;
left: 100px;
min-width: 125px;
min-height: 125px;
background-color: #e74c3c;
}
<div class="parent">
Parent element
<div class="child-blue">1</div>
<div class="child-red">2</div>
</div>
Code Explanation:
-
.parent: An element withposition: relative;andz-index: 10;that creates a new stacking context -
.child-blue: An element withposition: absolute;andz-index: 1;in the new stacking context created by the parent element -
.child-red: An element withposition: absolute;andz-index: 2;also in the new stacking context created by the parent, and will be placed above.child-blue
2.3 Interaction of Stacking Contexts
Elements within one stacking context cannot be stacked over elements from another stacking context unless the order of the contexts themselves changes. This means elements with a higher z-index within one stacking context will always appear above elements with a lower z-index in the same context.
Example of stacking context interaction:
.wrapper {
min-height: 500px;
}
.container1 {
position: relative;
z-index: 10;
padding: 20px;
margin-bottom: 200px;
background-color: lightgrey;
}
.container2 {
position: relative;
z-index: 20;
padding: 20px;
background-color: lightpink;
}
.box {
position: absolute;
min-width: 125px;
min-height: 125px;
color: white;
}
.box1 {
z-index: 1;
top: 50px;
left: 50px;
background-color: red;
}
.box2 {
z-index: 2;
top: 100px;
left: 100px;
background-color: blue;
}
<div class="wrapper">
<div class="container1">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
</div>
<div class="container2">
<div class="box box1">Box 3</div>
<div class="box box2">Box 4</div>
</div>
</div>
In this example, container .container2 with z-index: 20; will be displayed above container
.container1 with z-index: 10;. Elements within each container will be stacked according to their
z-index but will not overlap elements from another container.
2.4 Negative z-index Values
z-index can take negative values, allowing elements to be placed below other elements with zero or positive z-index values.
.container {
min-height: 300px;
}
.box {
position: absolute;
min-width: 125px;
min-height: 125px;
color: white;
}
.box1 {
z-index: -1;
top: 100px;
left: 100px;
background-color: #3498db;
}
.box2 {
z-index: 0;
top: 150px;
left: 150px;
background-color: #e74c3c;
}
<div class="container">
<div class="box box1">-1</div>
<div class="box box2">0</div>
</div>
Code Explanation:
.box1: An element withz-index: -1;, which will be placed below an element withz-index: 0;
Tips for using z-index:
-
Minimize z-index usage: Try to use
z-indexonly when really necessary. This helps avoid complex and confusing stacking structures. - Create stacking contexts consciously: Creating new stacking contexts helps manage element layering but can complicate the document structure.
- Use semantically meaningful z-index values: Assign
z-indexvalues meaningfully, like using positive values for top elements and negative for bottom ones.
GO TO FULL VERSION