Describe z-index and how a stacking context is formed in CSS
Last Updated :
07 Jun, 2025
The stacking order describes the order in which HTML elements are positioned. By default, HTML elements are positioned in the following order:
- Root element(<html>)
- Non-positioned elements in the order they're defined(elements with no position described, i.e., static)
- Positioned elements in the order they are defined(elements with a position other than static)
Let us try to understand how the default stacking order works:
Example 1: Default stacking order
Below is the HTML and CSS code to understand the default stacking order:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Default stacking order</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green {
position: absolute;
}
.red {
background: red;
}
.green {
background: green;
top: 40px;
left: 40px;
}
.blue {
background: blue;
top: 80px;
left: 80px;
}
</style>
</head>
<body>
<div class="box green">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
Output:
Output for above code snippetExplanation: From the output, we can see that although we defined the red box in the end, it still came on top of the green and blue box because it was non-positioned whereas the other two boxes were positioned.
z-index: In order to change the stacking order, we can use z-index. Element with higher z-index is placed on top of the element with lower z-index. Let us use the same. An important thing to note is that in order to use z-index, elements should be positioned. To learn more about CSS, positions, refer this article.
Example 2: Stacking with z-index
We use the previous example, but this time we will apply a z-index value to the green and blue boxes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Stacking with z-index</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green {
position: absolute;
}
.red {
background: red;
z-index: 100;
/*No effect since red is non-positioned*/
}
.green {
background: green;
top: 40px;
left: 40px;
z-index: 3;
}
.blue {
background: blue;
top: 80px;
left: 80px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box green">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
Output:
Output with z-indexExplanation: We observe that green box is placed on top of blue box because green box has a higher z-index value(3) than blue box(2). Also, note that red box has a z-index value of 100, but there is no effect since it is a non-positioned element.
Example 3: Now in order to understand stacking context, Let's say we add another box to the layout and we want the blue box to be behind it.Â
HTML
<!DOCTYPE html>
<html>
<head>
<title>Stacking context</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green,
.orange,
.purple {
position: absolute;
}
.red {
background: red;
z-index: 100;
}
.green {
background: green;
top: 60px;
left: 50px;
z-index: 1;
}
.orange {
width: 85px;
height: 85px;
left: 20px;
background-color: orange;
font-family: Arial;
z-index: 3;
}
.purple {
background-color: purple;
top: 30px;
left: 30px;
z-index: 0;
}
.blue {
background: blue;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box green">Positioned
<div class="orange">Positioned</div>
</div>
<div class="box purple">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
Output:
Stacking contextExplanation: We have added two new boxes: orange and purple. As expected, green box is on top of purple box because green box has higher z-index value than purple box. However, the orange box is still behind the blue box despite having a higher z-index value. Why is that so? By applying z-index value to an element, a stacking context is formed. The fact that a stacking context is formed means it also affects its child elements(orange box is a child of green box in this case). We can change the stacking order of child elements, but it will only have a meaning in that stacking context.So, the orange box is still behind blue box because they are not in the stacking context anymore.
Example 4: If we want to place blue box on top of orange box, there are two things that we can do:
- Either make the blue box a child element of green box
- Define orange box outside the green box
Here, we will make blue box a child element of green box.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Modified stacking context</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green,
.orange,
.purple {
position: absolute;
}
.red {
background: red;
z-index: 100;
}
.green {
background: green;
top: 60px;
left: 50px;
z-index: 1;
}
.orange {
width: 85px;
height: 85px;
top: 40px;
left: 25px;
background-color: orange;
font-family: Arial;
z-index: 3;
}
.purple {
background-color: purple;
top: 30px;
left: 30px;
z-index: 0;
}
.blue {
background: blue;
width: 85px;
height: 85px;
top: 25px;
left: 10px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box green">Positioned
<div class="orange">Positioned</div>
<div class="blue">Positioned</div>
</div>
<div class="box purple">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
Output:
Explanation: In above example, we see that blue box is behind orange box because they are in the same stacking context. There are other properties that also cause a new stacking context to be formed. Some examples are: transform, filter etc.
Conclusion:
Understanding the stacking order and stacking context is essential for controlling the layering of elements on your webpage. Using z-index appropriately allows you to manage the visibility of elements, creating dynamic and interactive designs.
Similar Reads
Difference between auto, 0, and no z-index in CSS When we have to order elements on the z-axis, we use the z-index property. in CSS, the z-index property only works on elements with a position value other than static. In this article, we will learn about the z-index property and its values, auto, number, initial, and inherit. We will also see the d
3 min read
What is Block Formatting Context in CSS ? In this article, we will learn about the Block Formatting Context in CSS & its implementation. A Block Formatting Context is a part of the visible CSS that is to be displayed on the web page in which the block boxes are positioned outside. The normal flow is the positioning scheme for which it b
4 min read
How To Apply Concept of Inheritance in CSS? Inheritance, a fundamental concept in object-oriented programming (OOP), mirrors real-life inheritance where children inherit traits from parents. CSS Inheritance: In CSS inheritance, the child element will naturally inherit properties from its parent element.Syntax:<style> #parentclass { colo
2 min read
Explain nesting and grouping in CSS The Nesting & Grouping concepts in CSS is used to write efficient and precise code. These techniques help reduce the amount of code, improving page load times and overall readability. Here, we will explore how nesting and grouping can optimize your code, enhance readability, and increase efficie
3 min read
How to stack elements in CSS ? In CSS, stacking elements refers to controlling the vertical positioning of overlapping elements on a webpage. This is managed using the z-index property, where elements with higher z-index values are stacked above those with lower values, affecting their visual order in layers.There are two methods
3 min read