Ever since I start learning how to code, all I knew about z-index was that z-index was something that you could use to make one element position above another element. In fact, this is true and this is what most beginner friendly tutorials will tell you and that's all I knew about it. UNTIL I started designing my portfolio [http://ridhikgovind.netlify.app/] and I had to personally deal with this z-index trouble which made me go haywire for 3 whole days. So what did I do ? I did what 100% of what all those who code would do - google it. And the search results I found out was an eye opening for me.
first of all why 'z-index' ? why not 'a-index' or 'g-index' ? Ever thought of that ?
Okay so everyone knows the graph with x and y-axis right ? What about the z-axis in the graph ? For who don't know what it looks like:
Now 'z-index' works the same way like 'z-axis' and this is where the elements stack up. Here is a even better illustration from a *smashingmagazine blog (https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/):
Now that is why its called 'z-index' becuase the elements are stacked along the z-axis.
How to tame the z-index !
z-index may look pretty simple, but if you don't understand some of the underlying concepts of it, there is a great chance you might end up in the rabbit hole of using z-index: 999999; (okay maybe a little exaggerated here). Let's talk about some rules now:
Also, open up this codepen in another tab as we will be referring to it often but just don't make any modifications yet : https://codepen.io/ridzman/pen/qBNMQKB
RULE 1: Always remember the 'stacking order' concept - Elements that come later in the HTML markup will have a natural tendancy to be on top of the former elements. You can notice in the codepen you have opened how the grey,blue and green boxes are stacked well on top of each other.
RULE 2: z-index will ONLY work on positioned elements - Unless you set a fixed or relative or an absolute position property on an element, z-index will have no effect on those elements whatsoever.
Can't believe this? worry not ! Go ahead and uncomment that "position:relative" in the CSS file of the codepen above. Now watch the stack order get reversed. Wait what just happened ? Rule 2 has happened - grey having the highest z-index becomes the element of top, followed by blue and green having the lowest z-index only after applying the position property.
RULE 3: A child element takes in the z-index of the parent - Time to work your fingers now. Go ahead and make a new div with an id="parent" on top of all HTML elements. Inside this div, cut and paste the whole div with id="grey". Final code would look something like this:
<div id="parent">
<div id="grey"></div>
</div>
<div id="blue"></div>
<div id="green"></div>
and give this parent the following CSS:
#parent {
position: relative;
z-index: 1;
}
What did we do here ? We made 'grey' the child element of 'parent'. Also, did you notice the grey element now? Oh, grey is under blue element even with a z-index of 9999. How ridiculous is that ! Well, time to face the truth my friend - A child can only act powerful and all bossy only if he is independent(which in reality its true !). But if the child is living under its parent, it only has power which the parents impose. Here the z-index: 1; of the parent is being passed down to the child as well and thus 'grey' element comes under 'blue' element.
Here is a codepen demo of RULE 3 to play with: https://codepen.io/ridzman/pen/mdEGYbG
Conclusion
Allow me to quote Paulo Coelho:
"The simple things are also the most extraordinary things, and only the wise can see them."
I hope reading this made you a little wise !
Hey there, I am Ridhik - a beginner learning how to code and allocating insane amount of time for fixing errors. Let me know if I've made any mistakes or there are areas which needs corrections. Connect with me on twitter: https://twitter.com/fluffyRidz
Top comments (8)
I made a mixin for that
$z-indexes: (
"header",
"results",
"thumbnail",
"SearchBarBtn",
"mainPageBlocks",
"searchBlock",
"lazyThumb",
"bgSvg"
);
@function z($name) {
@if index($z-indexes, $name) {
@return (length($z-indexes) - index($z-indexes, $name)) + 1;
} @else {
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
@return null;
}
}
This will come handy someday ! Thank you !
I didn't know that elements inherited z-index properties. Thanks for pointing that out. I'm sure adding the "!important" modifier in CSS would override this.
Oh yeah I will have to try out using !important, thanks for letting me know ;-)
When creating frontend of a webapp I too struggled 😂 but finally studied z-index and got the results.
Yeah I know right. Like who knew something so simple would take up hours to figure out. I too struggled with it too and hence the birth of this article - glad it helped you out ! :-)
Well written and that diagram was beautiful
Thanks a lot Deepak ! And yes I agree, the diagram itself is self-explanatory.