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 effects elements that have a position value other than static (the default).
didn't understand this 👆. Don't worry. Let's understand by actually coding it out:
Note: Z-index can be used with position property (other than static) or with display: flex and display: grid. We will understand the Z-index using the 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>
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:
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>
Now, we 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>
👆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 a negative z-index will be stacked below the box which has a 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>
👆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 the default value (z-index: auto) then finally beneath box a, we found box b (green) with negative z-index.
Thanks for reading!
I write articles related to web development. Follow me here if you are learning the same.
If you love the article follow me on Twitter: @therajatg
If you are the Linkedin type, let's connect: linkedin.com/in/therajatg
Have an awesome day ahead 😀!