2026-09-01 · 5 min read · Rahul Chitturi
- css
- frontend
- debugging
Increasing z-index does not let an element escape its stacking context. A modal at z-index 999999 can still render below a header when one of its ancestors forms a lower stacking context.
Opacity, transforms, filters, isolation, containment, and several positioned layouts can create these boundaries, while overflow and clipping may make the problem look like stacking.
Walk ancestors before changing numbers
Use browser developer tools to inspect the element and each ancestor. Find the nearest stacking context, then compare that context as one unit against its siblings in the parent context.
- Check position and non-auto z-index on siblings
- Look for transform, opacity, filter, isolation, and contain
- Separate paint order from overflow or clip-path clipping
- Check whether a native dialog or popover is in the top layer
Fix ownership of the layer
Move application overlays to a deliberate root portal or adjust the ancestor that owns the stacking context. Keep a small documented layer scale for base content, navigation, popovers, and modals.
Avoid removing transforms or containment blindly; they may support animation, positioning, or performance. Reduce the case and verify keyboard focus and scroll locking with the visual fix.
A Flashman workflow
Use the CSS formatter to expose context-creating declarations, diff to compare computed changes, color tool to verify overlay contrast, and HTML entities tool when reduced markup includes escaped content.
Test desktop and mobile viewports, nested portals, transformed containers, sticky headers, native dialogs, focus order, zoom, and forced-colors mode.