Common Misconception About z-index

I have many times come across large z-index values which indicate a misunderstanding of the CSS property and stacking contexts. I am the first to admit I did not always know the exact details of how stacking contexts are formed and affect the layering of elements but I would now highly recommend spending some time getting familiar with the rules.

I think that perhaps myself and many others learned the basic concept behind z-index and simply moved on thinking that it is the only property which controls all layering of elements. This is however not the case; z-index can only determine the layering of elements within a single stacking context. If one stacking context is on another no element within the lower context can be on top of the higher context.

I would probably consider any z-index value greater than even 3 a code smell unless the design was very complex, let alone values like 9999. A quick search of my personal projects shows I have never required the use of a z-index greater than 1!

Complex frontend designs can lead to unnecessary large amounts of time trying to combat layering issues which can be solved quickly with a better foundational understanding of stacking contexts. I would highly recommend all developers working on complex frontends read the MDN article on the stacking context or give Kevin Powell's excellent CSS Z-Index and Stacking Context video a watch, you never know when it might just save you some time!