DEV Community

Cover image for z-index; Tackling this tiny beast.
Ridhik Govind
Ridhik Govind

Posted on • Updated on

z-index; Tackling this tiny beast.

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:
alt text

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/):

alt text

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>
Enter fullscreen mode Exit fullscreen mode

and give this parent the following CSS:

#parent {
  position: relative;
  z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

 

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

Discussion (8)

Collapse
rediahila profile image
Ali Haider

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;
}
}

Collapse
ridhikgovind profile image
Ridhik Govind Author

This will come handy someday ! Thank you !

Collapse
_andro_ profile image
Alan

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.

Collapse
ridhikgovind profile image
Ridhik Govind Author

Oh yeah I will have to try out using !important, thanks for letting me know ;-)

Collapse
rabbitninja profile image
Shubham Mishra

When creating frontend of a webapp I too struggled 😂 but finally studied z-index and got the results.

Collapse
ridhikgovind profile image
Ridhik Govind Author

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 ! :-)

Collapse
deepakpoojary profile image
Deepak Poojary

Well written and that diagram was beautiful

Collapse
ridhikgovind profile image
Ridhik Govind Author

Thanks a lot Deepak ! And yes I agree, the diagram itself is self-explanatory.