Stacking Context

Updated 06 Oct 2026

•
What it is
•
a group of elements painted together as a unit relative to other groups
•
•
Common triggers
- •
  positioned elements with applicable non-automatic z-index.
- •
  fixed or sticky positioning.
- •
  opacity below $1$ , transforms, isolation: isolate, and paint containment.
- •
  flex or grid items with non-automatic z-index.
•
Debugging
- •
  inspect the chain of ancestor stacking contexts, not only the overlapping elements.
•
Reference
- •
  https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context
•

Linked references 3