DEV Community

Why you should stop z-index:9999

Fábio Borges on April 14, 2021

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 bet...

Read full post

Temani Afif • Apr 14 '21

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 of top/left/bottom/right for each element

Vesa Piittinen • Apr 16 '21

I'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:

:root {
    --zContentLayout: 1;
    --zPopupOverlay: 2;
    --zPopupLayout: 3;
    --zNavOverlay: 4;
    --zNavLayer: 5;
    --zModalOverlay: 6;
    --zModalLayer: 7;
}

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.

Fábio Borges • Apr 14 '21

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!

Arturo Gamboa • Apr 15 '21

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

Fábio Borges • Apr 15 '21

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