CSS: Fix modal rendering behind nav — learn z-index, stacking contexts, and transform side effects
CSS z-index and stacking context debugging exercise — fix a modal dialog that renders behind a sticky navigation bar despite having a higher z-index value. Two separate bugs cause the failure: the modal has no position property so z-index is silently ignored on static elements, and the modal's parent wrapper uses transform: scale(1) which creates a new stacking context that traps the modal's z-index within it. Learn why z-index only applies to positioned elements, which CSS properties create stacking contexts beyond just z-index, and how to diagnose layering issues by tracing the stacking context tree. Covers position: fixed, CSS transform side effects, and why z-index comparisons only make sense between elements in the same stacking context. Both the broken and correctly layered implementations are provided.
Comentarii