DEV Community

loading...
Cover image for Why you should stop z-index:9999

Why you should stop z-index:9999

fborges42 profile image Fábio Borges ・3 min read

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.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3omvlqlc6coydg3mqksi.png

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

image

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

And then we can just fetch anywhere in the project like so.

.table{
  var(--base);
}

.modal{
  var(--modal)
}
Enter fullscreen mode Exit fullscreen mode

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

To fetch the values we can use maps

.modal{
  z-index: map-get($zindex, modal);
}

.footer{
  z-index: map-get($zindex, footer);
}
Enter fullscreen mode Exit fullscreen mode

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

  ... 
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (11)

pic
Editor guide
Collapse
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

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

Collapse
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!

Collapse
theriusblackers profile image
Arturo Gamboa

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

Collapse
fborges42 profile image
Fábio Borges Author

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

Collapse
hugekontrast profile image
Ashish Khare😎

Thanks for sharing such a good tip! Hope to get more of such Best Practices in CSS.

Collapse
hmphu profile image
Hoang Manh Phu

Thanks so much for that great tips

Collapse
fborges42 profile image
Fábio Borges Author

You're welcome :)

Collapse
inhuofficial profile image
InHuOfficial

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! 😋

Collapse
fborges42 profile image
Fábio Borges Author

Touchê my friend 😁

Collapse
pedrotvr profile image
pedrotvr

Great Job bro!!!