Sometimes you just need to handle your custom modal depth, or maybe you had to deal with sticky positioning. We've all been there and there are better ways of achieving this.
The problem
So I guess you went too far with it, and now you don't actually know what's the difference between z-index:549
and z-index:329
. And why the heck is this table button z-index:9999
? It's ruining my modal!
I won't get too much on the problem side, I guess if you're here you probably know what's happening, and you just need a better approach so let me try and show you different ways of fixing this.
Solutions
Let's say, for the sake of simplicity, that we have 3 levels of depth: base, footer, and modal.
The CSS var approach (KISS)
Here we just store those 3 index, so we can use them later.
:root{
--base: 1;
--footer: 100;
--modal: 200;
}
And then we can just fetch anywhere in the project like so.
.table{
var(--base);
}
.modal{
var(--modal)
}
You might need to use CSS vars to be able to manipulate them in JavaScript but in this scenario it's not clear what's inside those variables, and they will be easily lost between many others you might have, maybe a preprocessor could help.
More on the 100 range gaps next.
Using a preprocessor (SASS)
Same idea here but maybe a bit more organized. The idea here is to store those default values inside the $zindex
variable that we can access and manage it better.
$zindex: (
base: 1,
footer: 100,
modal: 200,
);
To fetch the values we can use maps
.modal{
z-index: map-get($zindex, modal);
}
.footer{
z-index: map-get($zindex, footer);
}
But why the heck are we gapping 100 values?
Sometimes you might even see it in 1000 range gaps, but the main reason for this is just in case you need to add something in between and since z-index
can't handle decimal numbers you're safer doing it this way.
Even if you don't add 99 extra items between depth.
Getting funky with it
Unless you're doing a tiny project you'll probably need to deal with a lot of deeper depth levels, but that's not a problem.
Since we have default values for all the depths lets think in a scenario where you might have the need to have way more management over a modal. Here's what we can do:
$zindex: (
base: 1,
footer: 100,
modal: (
base: 200,
footer: 210,
header: 220,
close: 230,
),
);
.modal{
z-index: map-get($zindex, modal);
.modal__btn--close{
z-index: map-get($zindex, modal, close);
}
...
}
Conclusion
There's a lot more ways of handling z-index
you just need to get creative and keep things organized. It's pretty clear we can all do a better job with it.
Do you have a different or easier way of doing it? Let others know on the comments!
I hope this could help someone out. Cheers, see you soon!
Special thanks to https://unsplash.com/@didsss for the header image :)
Top comments (11)
IMO, if you find yourself dealing with a lot of z-indexes then you have something else to fix. Whataver the complexity of the website, you rarely need to deal with a lot of values. I generally use only 4 values: -1,0,1 and a very big value. They cover almost all the different use cases I always face.
It's similar to someone who is trying to place all the elements using
position:absolute
and find himself spending days to figure out the values oftop
/left
/bottom
/right
for each elementI've worked on two complex sites and you should survive with less than 10. The need for some occur with modals and navigation layers, and with content you need a couple for elements that popup on top of other content (but should obviously not go on top of navigation and modal layers).
Also, as CSS has advanced the need for
z-index
tricks has become a rarer thing.So even for a complex layout something like this should be near the maximum required:
And even these can be compacted if DOM structure is well maintained, but that is not a guarantee when working on a site with a lot of contributions.
It really depends on what you're trying to do and the amount of components you need to develop but I agree with you that we shouldn't need 1000 index'es. My main attempt here was to show a cleaner way of doing it taking advantage of variables 😉
Thanks for the comment!
very good post bro ... the truth was entertaining to see it hehe, although the examples were somewhat exaggerated, the truth is I always use sass for greater order, I have my file with my z-index styles and others, then I import and so on and I have everything well organized ... the truth is I like not having such high numbers, I mean that the largest is like 50 or something like that .... thank you very much for the post: D
Thanks for the feedback Arturo.
That's also a great way of doing it, SASS is a plus and hopefully we'll see this features on CSS in the future. Most of the times you probably won't even need the 100 gap and 10 would just do fine ;)
Thanks for sharing such a good tip! Hope to get more of such Best Practices in CSS.
Jokes on you I don't use 9999 for my z-index, I go full 2,147,483,647 to make sure it is the top of the top of the top of the pile! 😋
Touchê my friend 😁
Thanks so much for that great tips
You're welcome :)
Great Job bro!!!