DEV Community


Discussion on: Why you should stop z-index:9999

afif profile image
Temani Afif

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

fborges42 profile image
Fábio Borges Author

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!

merri profile image
Vesa Piittinen

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

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.

Forem Open with the Forem app