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 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: Link
- The Z-Index CSS Property: A Comprehensive Look3
- Extending In Sass Without Creating A Mess4
- What Everyone Should Know About The Process Behind App Design5
- Stronger, Better, Faster Design with CSS36
Another common strategy is to increment z-index values7 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 Link
- 1 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- 2 https://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
- 3 https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/
- 4 https://www.smashingmagazine.com/2015/05/extending-in-sass-without-mess/
- 5 https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/
- 6 https://www.smashingmagazine.com/2009/12/stronger-better-faster-design-with-css3/
- 7 https://github.com/twbs/bootstrap/blob/master/less/variables.less#L250
- 8 http://behance.net
- 9 https://www.smashingmagazine.com/wp-content/uploads/2014/06/01-behance-opt.jpg
- 10 https://www.smashingmagazine.com/wp-content/uploads/2014/06/01-behance-opt.jpg
- 11 http://sass-lang.com/documentation/Sass/Script/Functions.html#index-instance_method
- 12 https://www.smashingmagazine.com/wp-content/uploads/2014/06/02-behance-opt.jpg
- 13 https://www.smashingmagazine.com/wp-content/uploads/2014/06/02-behance-opt.jpg
- 14 https://www.smashingmagazine.com/wp-content/uploads/2014/06/03-behance-opt.jpg
- 15 https://www.smashingmagazine.com/wp-content/uploads/2014/06/03-behance-opt.jpg
- 16 http://sass-lang.com/documentation/Sass/Script/Functions.html#list-functions
- 17 http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/
- 18 http://css-tricks.com/handling-z-index/
- 19 https://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
- 20 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- 21 http://css-tricks.com/handling-z-index/
- 22 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
- 23 http://sass-lang.com/documentation/Sass/Script/Functions.html#list-functions
- 24 http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/