Z-Index is not voodoo bro
Z-index is a is a CSS property, which can be confusing to use sometimes. You’re lost in the sauce of hacking and positioning in CSS, and you need this HTML element to stay on top of the other element, or behind it, but no matter how hard you try to manipulate it, it just wouldn’t act right. Or sometimes elements are overlapping each other for some weird reason that you can’t really figure out, and there are quite a number of reasons that cause elements to overlap each other, and then you need Z-index to help you fix it, and arrange the elements over each other how your design intended it to be. Okay, first of all, Z-index, like every other CSS property, follows certain rules. It is not voodoo bro.
Recently, I’ve been very curious about what Z-index really does, what it was intended to do and how it works, hence this investigation:
What is Z-Index?
Z-index is a CSS property that determines the stacking order of positioned elements. When elements overlap each other, Z-index will determine which element stays on top of which. The element with the higher index number covers the element with the lower index number. Z-index determines the stack level of a HTML element. Stack level of an element means where an element is positioned in the Z-axis (spatial dimension). The other two dimensions are the x-dimension (horizontal) and the y-dimension(vertical).
When does Z-Index work?
Z-index can determine the stack order of both inline and block elements. Z-Index works only when the HTML element is explicitly positioned. This means that Z-index only works on positioned elements. A positioned elements is an element whose position value is either set to absolute, fixed, relative, or sticky. That is, the element has to be set to any position value other than static, which is the default position value.
Stacking without Z-Index or Natural Stacking Order
This is the way that elements are naturally stacked before z-index is implemented. Stacking order typically means which element goes on top of which and these are the rules that the stacking order follows when arranging elements on the Z-axis:
— Background and borders of parent elements
— Child blocks in the normal order of HTML apearance
— Positioned blocks in the normal order of HTML appearance
How does Z-Index work?
Z-index can either take the value “auto”, which gives the element the same stack order as its parent element. The Z-index can also take integer values, both positive and negative. The elements with the higher integer values stay on top of the elements with the lower integer values. The Z-index can also take global values such as inherit, initial, unset. Inherit gets the property value of the parent element. Initial gets the default property that comes with the DOM. Unset takes either the value of the parent or the default property. Unset will take the parent property if the parent element has a value that matches i.e it can either act as initial or inherit depending on if the parent value has a value that fits it.
An Example and a Video
Run this code without z-index position:
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<div class="yellow__box"></div>
<div class="red__box"></div>
<div class="orange__box"></div>
</body>
</html>
css without z-index:
.yellow__box{
position:absolute;
width:300px;
height:300px;
background:yellow;
}.red__box{
top:60px;
left:60px;
position:absolute;
width:300px;
height:300px;
background:red;
}.orange__box{
top:120px;
left:120px;
position:absolute;
width:300px;
height:300px;
background:orange;
}
the result:
Using z-index to stack the red box on top of all the other boxes:
.yellow__box{
position:absolute;
width:300px;
height:300px;
background:yellow;
z-index:1;
}.red__box{
top:60px;
left:60px;
position:absolute;
width:300px;
height:300px;
background:red;
z-index:30;
}.orange__box{
top:120px;
left:120px;
position:absolute;
width:300px;
height:300px;
background:orange;
z-index:2;
}
The result:
Using z-index to stack the yellow box on top of all the other boxes:
.yellow__box{
position:absolute;
width:300px;
height:300px;
background:yellow;
z-index:100;
}.red__box{
top:60px;
left:60px;
position:absolute;
width:300px;
height:300px;
background:red;
z-index:1;
}.orange__box{
top:120px;
left:120px;
position:absolute;
width:300px;
height:300px;
background:orange;
z-index:2;
}
The result:
See this video for a practical example and thanks for reading. If you enjoyed reading, remember to clap and share!
