Open In App

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

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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 snippet

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-index

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 context

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:


A

adhetyanarayan
Improve
Article Tags :

Explore

Lightbox