gotchacssMajor
CSS transform creates a new stacking context
Viewed 0 times
transformstacking contextfixed positioningcontaining blockz-indexopacity
Problem
Applying a CSS transform to an element causes it and its children to behave unexpectedly in terms of z-index layering, or causes fixed-position children to no longer be fixed relative to the viewport.
Solution
Be aware that transform (along with opacity < 1, filter, will-change: transform, etc.) creates a new stacking context and a new containing block for fixed/absolute children:
/* This parent will trap fixed children relative to itself, not viewport */
.parent {
transform: translateZ(0); /* creates stacking context + containing block */
}
.child {
position: fixed; /* now fixed to .parent, not the viewport! */
top: 0;
}
/* Solution: move fixed elements outside of transformed ancestors */Why
The CSS specification defines that transformed elements create a containing block for all positioned descendants, including fixed-position ones. This overrides the viewport as the reference for position: fixed.
Gotchas
- opacity: 0.99 also creates a stacking context — even fractional opacity values trigger this.
- will-change: transform creates the stacking context proactively, before the animation starts.
- filter: none does NOT create a stacking context, but any non-none filter value does.
- This is a frequent source of bugs with sticky headers or modal overlays inside transformed containers.
Context
When position: fixed elements stop being fixed, or z-index layering breaks after adding a transform.
Revisions (0)
No revisions yet.