DEV Community

Rajat Gupta
Rajat Gupta

Posted on

Z-Index (CSS): Everything you need to know

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default).

didn't understand this ๐Ÿ‘†. Don't worry.
Let's understand how a real man (or lady) should! by actually doing:

Note: We will understand the Z-index using position property of css (If you don't know what it is read my blog on positioning here).
We can use the z-index property with position: relative/ absolute/ fixed/ sticky. But, it won't work with "position: static" which is the default value.

Below is our base code, in which we took 4 boxes with different colors.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            font-weight: bolder;
            font-size: xx-large;
        }
        .a{
            background-color: red;
        }

        .b{
            background-color: green;
        }

        .c{
            background-color: blue;
        }

        .d{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

base code.PNG
Now, let's say I want these 4 boxes to overlap each other. I will also make them move to slight right such that I could see the color and text on each box.
Basically, I want to achieve this:

default stack.PNG

I suggest you to code it out on your own using "position: absolute" before referring to the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            font-weight: bolder;
            font-size: xx-large;
        }
        .a{
            background-color: red;
        }

        .b{
            background-color: green;
            position: absolute;
            top: 0px;
            left: 20px;
        }

        .c{
            background-color: blue;
            position: absolute;
            top: 0px;
            left: 40px;
        }

        .d{
            background-color: yellow;
            position: absolute;
            top: 0px;
            left: 60px;
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now, we are are all set to understand z-index.

By default, the value of z-index is auto (you can assume it to be 0 instead of auto to understand better). Now, let me assign value to z-index property in box c (blue) in the below code and see what happens:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            font-weight: bolder;
            font-size: xx-large;
        }
        .a{
            background-color: red;
        }

        .b{
            background-color: green;
            position: absolute;
            top: 0px;
            left: 20px;
        }

        .c{
            background-color: blue;
            position: absolute;
            top: 0px;
            left: 40px;
            z-index: 1;
        }

        .d{
            background-color: yellow;
            position: absolute;
            top: 0px;
            left: 60px;
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

c on top.PNG

๐Ÿ‘†Here, we can see that the box c (blue) came on top.

Some facts about z-index are as follows:

  • Whichever box has the highest z-index will come on top.
  • Value assigned to z-index can be any number except decimals because if we give decimal value to z-index, it won't work.
  • Value assigned can also be negative. The box with negative z-index will be stacked below the box which has default value of z-index that is "z-index: auto".

To understand it more clearly, see the below example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            font-weight: bolder;
            font-size: xx-large;
        }
        .a{
            background-color: red;
        }

        .b{
            background-color: green;
            position: absolute;
            top: 0px;
            left: 20px;
            z-index: -1;
        }

        .c{
            background-color: blue;
            position: absolute;
            top: 0px;
            left: 40px;
            z-index: 43561;
        }

        .d{
            background-color: yellow;
            position: absolute;
            top: 0px;
            left: 60px;
            z-index: 43560;
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

final.PNG

๐Ÿ‘†As expected box c (blue) came on top since it has the highest value of z-index then came box d (yellow) in order then came box a (red) with default value (z-index: auto) then finally beneath box a, we found box b (green) with negative z-index.

Thanks for reading!

I hope the above article added some value.
If it did, follow me on twitter: @Rajat Gupta (@therajatg)
However, If linkedin is your thing, let's connect: https://www.linkedin.com/in/therajatg/

I write about javascript, react, css and everything in between.

Have an awesome day๐Ÿ˜ƒ!

Top comments (0)