Describe z-index and how a stacking context is formed in CSS
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:
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.
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.
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.
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.