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:

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.

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:

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.

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:

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.

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.

adhetyanarayan

Improve

Article Tags :

Describe z-index and how a stacking context is formed in CSS

Conclusion:

Similar Reads

Thank You!

What kind of Experience do you want to share?