CSS stacking contexts break z-index in ways most developers never expect. Setting z-index: 99999 on an element means nothing if its parent has already created a stacking context with a lower z-index than a competing parent. The browser stacks parent containers first, then resolves child z-index values only within their own container. A child element can never escape its parent stacking context, period.
The problem is invisible because many CSS properties silently create new stacking contexts for performance reasons, not visual ones. Applying opacity (any value below 1), transform, filter, or perspective tells the browser to promote an element to its own compositing layer. That is an optimization, but the side effect is a new stacking context. The MDN list of stacking-context-creating properties is longer than most developers realize, which is exactly how a modal with position: fixed and z-index: 1 ends up buried under another element.
The article does not stop at explaining the mechanics. It walks through specific failure scenarios, including the classic trapped modal pattern, and shows how to diagnose and fix each one. If you have ever opened a browser inspector and stared at a z-index value wondering why it is being ignored, this is the piece that explains the actual reason.
[READ ORIGINAL →]