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