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>
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 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 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>
👆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)