Describe z-index and how a stacking context is formed in CSS
Last Updated :
19 Sep, 2021
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 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:
[tabby title="HTML"]
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 for above code snippet
Explanation: 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.
[tabby title="HTML"]
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 with z-index
Explanation: 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.
[tabby title="HTML"]
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>
Stacking context
Explanation: 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.
[tabby title="HTML"]
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>
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.
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
Difference Between Justify-Content and Align-Items In CSS
In CSS, "justify-content" aligns items along the main axis (usually horizontal), controlling space distribution within a container. In contrast, "align-items" aligns items along the cross-axis (usually vertical), managing how items are placed relative to each other within the container. Both are key
6 min read
How to define a thematic change in the content in HTML5?
In this article, we will see how to define a thematic change in the content of a page. This can help to introduce a break in between paragraphs when the description of the paragraph changes. The <hr> element in HTML is used to represent a thematic change in the content. It can be used with att
2 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
Does overflow: hidden create a new block formatting context in CSS ?
In this article, we will see "Does overflow:hidden create a new block formatting context(BFC)?". The answer is yes, the overflow property with value anything but visible(because its default) will create a new block formatting context. And as we know block formatting context prevents edges from colla
2 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 { co
2 min read
How flexible items can be of the same length regardless of its content in CSS ?
The flex property is used to set the length of flexible items regardless of their content in CSS. So to make flexible items to the same length, regardless of their content in CSS, we use the flex property. It takes three values first is flex-grow which specifies how many items will grow relative to
2 min read
How to arrange text in multi columns using CSS3 ?
In many websites, content is often displayed in parallel stacks to present more information in a compact space, similar to how newspapers and books are formatted. This pattern helps display large amounts of content in a small area, making it easier to read. In this article, we will learn how to arra
4 min read
How to Set the background-color of different Elements in CSS?
Background colors in CSS set the color behind an element's content and padding. Use the background-color property to assign colors to elements, specifying values in hex, RGB, or color names. This allows customization of elements' backgrounds for design and readability. Using Background Color Propert
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