midCSS
Explain CSS Stacking Contexts in depth.
Updated Apr 28, 2026
Short answer
A stacking context is an isolated layer of rendering. Child elements' z-index are only relative to their parent's stacking context.
Deep explanation
If an element establishes a stacking context, all of its children are stacked relative to it. Elements outside this context cannot interleave with elements inside it. Properties like opacity < 1, transform, filter, and specific z-index values trigger a new context.
Real-world example
Fixing a bug where a high z-index modal is trapped behind a low z-index header because the modal's parent has a transform applied.
Common mistakes
- Blindly adding z-index: 9999 without inspecting the parent containers for properties that create a stacking context.
Follow-up questions
- Name three CSS properties that create a new stacking context.