My name is Ju

Better Z-Index Management

This will make one tiny problem go away!

Before posting, I noticed wrote about this some months ago. I decided to put it up anyways, because my approach uses a default index list, which therefore is slightly more practical.

The old way

Some years ago, I read somewhere (can’t remember where and when) that z-index: 99999; is “a webdevelopers desperate cry for help”.

The article was about z-index management and she/he/they suggested to use variables, to get rid of those z-index massacres:

$z-index-header: 1;
$z-index-main:   2;
$z-index-modal:  3;
// ..and so on I started using this approach. And it worked out pretty good!

Imagine a new feature “Feedback Overlay” that has to be above everything except the header and maybe some warning modals that might pop up: Having multiple, fixed elements overlapping each other, spread all over the project, this could end in a desaster.

But with those $z-index-variables, all existing indexes are in one place.

Then I worked on a project, managing about 20 different indexes.

When I had to add a new index at the very bottom, I had to rewrite the entire list..
Nobody likes this! So it made me think of an even better way to manage z-indexes:

The new way

Now I use a list of named z-index and a tiny scss helper function:


@function zindex($name, $list: $default-indexes) {
    @return index($list, $name);

Global usage:

.header {
    z-index: zindex(header); // 2

.main {
    z-index: zindex(main); // 1

Within a css module, you can define a separate list and use that instead:

$module-z-indexes: head, body, footer;

.module__footer {
    z-index: zindex(footer, $module-z-indexes); // 3

If you prefer, a mixin can help too:

@mixin zindex($name, $list: $default-indexes) {
    z-index: zindex($name, $list);

Now you only have to maintain your index lists and never have to care about the actual indexes.

It’s simple and it won’t save the world, but it made me happy.