CSS / stacking context / overlay
Review CSS stacking contexts and overlays
Review overlap causes that z-index alone cannot fix with fixed cases. This guide does not fetch a real DOM or external CSS.
Stacking-context matrix
Separate the context trigger from the context containing the overlay.
| Case | Context trigger | Overlay position | Review point |
|---|---|---|---|
| root-context | root | same root | identify the base context |
| position-z-index | position + z-index | local context | compare within the parent context |
| opacity-context | opacity < 1 | inside opacity element | comparison range changes |
| transform-context | transform | inside transformed element | identify the new context |
| nested-context-boundary | nested context | cannot cross parent | child z-index cannot reverse it alone |
Review order
- Identify the contexts of the overlay and covered element.
- Find opacity, transform and z-index context triggers.
- Do not compare a child z-index outside its parent context.
- Review the real DOM and browser rendering separately.
Fixed cases only. No real site, external CSS or user CSS is handled.