Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts1, 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 contextual2, 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 infamous99999was 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?
Another common strategy is to increment z-index values3 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 Behance4’s home page as an example:
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!