Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element’s visibility and usability, keeping your website’s UI in working order can be a delicate balance.
Because z-index is contextual, once you start using it, it can be easy for other elements to start requiring it as well. Finding
z-index: 99999 rules scattered throughout a website is not uncommon, but the infamous
99999 was simply born of frustration. It is often misused as an easy way to force an element above everything else, but
z-indexes are not always so straightforward. It is also not entirely scalable: What if you need to add something on top of that?
Further Reading on SmashingMag:
- The Z-Index CSS Property: A Comprehensive Look
- Extending In Sass Without Creating A Mess
- What Everyone Should Know About The Process Behind App Design
- Stronger, Better, Faster Design with CSS3
Another common strategy is to increment z-index values by double digits, so that you have room to insert other elements later, but that doesn’t solve the problem of keeping track of them all, and it doesn’t scale well when you want to add ones in between.
Every z-index instance raises a number of questions:
- Why does this element have this z-index value? What does it mean in the context of every other element?
- Where does it fit in the order and context of other z-index values? If I increase this one, which others are affected?
- If I add an element to the stacking order, which z-index values do I have to increase accordingly?
Using Sass To Maintain Order
With Sass, controlling all of the factors above is easy using lists. Let’s use Behance’s home page as an example: