CSS
04 Sep 2026
10 min read
Debug CSS z-index with Stacking Contexts
A z-index bug often looks irrational. You give a menu z-index: 9999, yet a header still covers it. Increasing the number to 999999 changes nothing. The natural conclusion is that z-index is unreliable. It is not. The mistake is usually comparing numbers that belong to different stacking contexts. A stacking context is a local coordinate system for painting overlapping elements. Descendants are ordered inside that context, and then the entire context participates as one unit in its parent’s stacking order. A child with a huge z-index cannot escape a parent that is painted below a sibling context.