I’ve run into issues time and time again managing z-index. Sure, most of the time, z-index related issues are far from complex.
However, I’ve come to a passionate dislike of magic values and numbers. What is 58 or 3000 after all? It’s an arbitrary number. Wouldn’t it be a lot nicer to have layers in CSS, just like in Photoshop or Illustrator ?
And sure enough, a quick search revealed multiple articles around z-index management.
CSS Layers instead of Z-Index
After years of using Sass daily, I’ve switched over to Stylus (that probably deserves an article of it’s own), and sure enough – a quick search search revealed an already made Stylus mixin in a Github gist.
I’m using a slightly modified version of that.
Configure the layers.
The configuration file contains all the layers and their z-index. I’m not using dots or hashes in names, so I can avoid adding quotes as well. This makes it just a little bit tidier for my taste.
The z-index manager mixin
I’ve modified the mixin in a few ways:
- I’m calling it layer. Easier to type than z_index, and it makes sense to me.
- I’ve added
unused_z_layers, which is going to help with debugging ( see below ) - I’ve also added
adjustoption to the mixin.
Usage
The adjust option comes in really handy when dealing with local changes, without having to create a new layer for absolutely everything.
For example, if you have a layer for the menu, and you want to place a second div just under the menu, instead of having to create Menu: 500, Thing_Under_Menu: 490, I just use layer(Menu, -10).
So the usage looks something like this:
The Debug
Having a lot of layers sometimes results in unused layers that are defined. This helps me keep track of that. In case
Stylus will already throw an error if I try to use layer(Mooooo) if Moooo doesn’t exist. That’s good.
However, what about the inverse? When Moooo is defined, but is unused? That’s where the debug comes in:
That’s going to throw a console warning when an unused layer is found.
I always include this after everything else, and on each compile it’s going to check for unused layers.
That’s it.
It’s a really simple approach, but has helped me keep my sanity when managing z-index in complex layouts.