ProblemsPortal Stacking with isolation: isolate
06Easy

Portal Stacking with isolation: isolate

CSS / Layout

CSSStacking Contextz-indexisolation

Context

A modal was rendering behind a sticky header even with a high z-index. The header's parent had a `transform` applied, creating an unintended stacking context that trapped everything inside it. Adding `isolation: isolate` to the layout root fixed the layering immediately.

The Concept

`isolation: isolate` creates a new stacking context with no side effects. It is the correct fix when modals or dropdowns render behind other elements despite a high `z-index`.

Task

The `.root` wrapper has no stacking context, so modals can appear behind other elements. Add one CSS property to `.root` that creates an isolated stacking context — without using `z-index`, `transform`, or `opacity`.

styles.css
Hints0/2 revealed