TABLE OF CONTENTS
- Introduction/Definition
- Simple illustrations to explain z-index
- Normal Document flow
- Applying z-index
- Nested div with z-index
- Z-index with CSS Pseudo-Element.
- Conclusion
INTRODUCTION/DEFINATION:
The CSS z-index property allows you to set the vertical stacking order of an element.
By default, elements are stack from top to bottom. But with z-index you can redefine the stacking order of an element. Whereas an element with the highest z-index number stays on the foreground while the ones with the lowest stays at the background.
See syntax below.
z-index only works when the said element has a CSS position property set to it. The z-index property has 4 values which includes; auto, numbers, initial and inherit.
Auto: The auto value sets the stack order equal to its parents, this is the default.
Number: The number values. This is not an exact number, it varies. You can choose any number you want.
Initial and Inherit:
The initial value set the z-index of the element to it default value, while inherit set the z-index of the child element to inherit the parent element property.
For better understanding let’s take a look at some following illustrations below.
SIMPLE ILLUSTRATIONS TO EXPLAIN Z-INDEX
NOTICE: Image one show us the normal stacking order of contents on the web page. The HTML elements stack in the order that they appear in the DOM. the HTML element that came first shows first. While image two show us how elements can be stack on top one another using z-index, but Note that this can only take effect when you apply CSS position property to it. In image three we took a perspective view of the z-index effect with the Y-axis and the Z-axis represented.
NORMAL DOCUMENT FLOW
Now let’s see how document are stack normally.
Type the code below and run on your browser.
<body>
<div class="blue box">
<div class="brown box"></div>
</div>
<div class="green box"></div>
<div class="red box"></div>
</body>
.box {
width: 100px;
height: 100px;
border-radius: 10px;
margin-bottom: 10px;
opacity: 0.9;
}
.blue{
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
Your code should look like this on the browser
In the above code example we have four div’ tags, one of which is a nested div. Each div tags have a class of box and a class of blue, brown, green and red respectively. First we targeted the box class and added width and height to give it a specific size and then border-radius and margin-bottom of 10px each.
The margin-bottom helps to separate the individual div tags with a white space (margin). opacity is added to reduce the color intensity so that we can see through each element when we stack them on top one another.
APPLYING Z-INDEX:
Now let’s see how z-index take effect
Type and run the code on your browser.
.box {
width: 100px;
height: 100px;
border-radius: 10px;
margin-bottom: 10px;
opacity: 0.9;
}
.blue{
background-color: blue;
position: absolute;
z-index: 8 ;
margin-left: 1em;
margin-top: 5em;
}
.green {
background-color: green;
position: absolute;
z-index: 2 ;
margin-left: 6em;
margin-top: 1em;
}
.red {
background-color: red;
position: absolute;
z-index: 5;
margin-left: 4em;
margin-top: 3em;
}
Your Code should look like this on your browser
In the above code example, we added CSS position property, without which the z-index property will not take effect. We set the position to absolute. This remove the elements from the normal stacking order of the DOM.
Then we added a z-index of 8 to the blue class, 2 to green and 5 to red respectively. We added margin-top and margin-bottom to each of the element to separate them from each other, this also helps us visually to see how each element are stacked in the DOM.
NESTED DIV WITH Z-INDEX
In this example we’ll talk about nested div with z-index.
As you will see from the code below, we don’t need to add z-index property and position property to the brown class which is a nested div of the blue class since both property support inheritance.
All we have to do is set the margin-top and margin-bottom to overlap the element so that we can see both the brown element and the blue element.
Without margin the brown element will cover (directly on top) the blue element making it NOT
visible.
A direct child can NOT have a higher z-index to a sibling of its parent, that is blue and red are both of same siblings and since brown is a child of blue, brown can NOT be at the foreground of red as long as blue is at the background of red. Even if brown is set to a higher z-index than red.
If brown must come to the foreground of red, blue have to be set to a higher z-index value that make it come to the foreground of red, indirectly putting brown to the foreground of red so as blue.
Type and run the code on your browser. [section A]
.blue{
z-index: 4 ;
}
.brown {
background-color: brown;
z-index: 10;
margin-left: 4em;
margin-top: 3em;
}
browser out put [section A]
Now Let's take a look a section b code [section B]
.blue{
z-index: 9 ;
}
.brown {
background-color: brown;
z-index: 10;
margin-left: 4em;
margin-top: 3em;
}
browser out for section B
NOTE: From section A and section B. Take note how the blue class and brown both move together when the z-index values (numbers) changes.
Z-INDEX WITH CSS PSEUDO-ELEMENT
In the previous example we talked about how a direct child can NOT have a higher z-index to a sibling of its parent. The same thing is applicable here with CSS Pseudo-Element.
A Pseudo-Element can NOT have a higher z-index to its parent siblings, when the parent has a lower z-index compare to its siblings.
If the Pseudo-Element must have a higher z-index, the parent must be set to a higher z-index greater to that of it's siblings.
Type and run the code below for better understanding [section A]
.blue{
background-color: blue;
position: absolute;
z-index: 9 ;
margin-left: 1em;
margin-top: 5em;
}
.blue::before{
content: '';
width: 50px;
height: 50px;
background-color: coral;
position: absolute;
z-index: 1;
margin-left: 6em;
margin-top: 1em;
}
.green {
background-color: green;
position: absolute;
z-index: 2;
margin-left: 6em;
margin-top: 1em;
}
Browser output [section A]
Type the code below and run [Section B]
.blue{
background-color: blue;
position: absolute;
z-index: 9 ;
margin-left: 1em;
margin-top: 5em;
}
.blue::before{
content: '';
width: 50px;
height: 50px;
background-color: coral;
position: absolute;
z-index: 1;
margin-left: 6em;
margin-top: 1em;
}
.green {
background-color: green;
position: absolute;
z-index: 10;
margin-left: 6em;
margin-top: 1em;
}
Browser output [Section B]
In section A, the blue element has a higher z-index than the green element which bring the blue element to the foreground of the green while in section B, the blue element has a lower z-index than the green element which bring the blue element to the background of the green.
CONCLUSION:
Alright! We’ve come to the end of this tutorial.
Thanks for taking your time to read this long blogs post about z-index.
Feel free to ask questions. I’ll gladly reply back.
You can find me on Twitter and other social media @ocxigin.
Cheers.