Z-Index (CSS): Everything you need to know
Tags: css, webdev
Published: 2022-02-01 22:05:55

**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](https://therajatg.hashnode.dev/positioning-in-css-everything-you-need-to-know#comments-list)).
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. 

```html
<!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>
```

![base code.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1642703585280/jWjbm7KHp.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1642703505770/GOQNlunt_.png)

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


```html
<!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>
``` 

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:
```html
<!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>
```

![c on top.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1642705181607/QLx8eb1XR.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:
```html
<!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>
```

![final.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1642706365616/m76tqgJQO.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) (@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😃!**