resumemaker.eu
← TechnologyThe essentials of

isolation: a separate context for the layers of a component

Publisher: ResumeMaker • 1 source

Published: 22 Oct 2026 13:13 · Updated: 22 Oct 2026 13:13

AI source check: 21 Oct 2026 10:36. This is not editorial approval.

In a few sentences

In brief

isolation: isolate creates a new stacking context without requiring a random z-index just for that purpose.

Useful to know

isolation: isolate; requires the element to create a new stacking context. In auto, such a context only occurs if another applied property requires it. MDN indicates the useful relationship of isolation to z-index and color mixing modes. [1]

The example .card { isolation: isolate; } makes the intention obvious: the card gets its own context. This does not automatically move the card over all other items and does not crop its contents. Layout and clipping remain separate tasks.

The property is suitable for a thought-out border of a visual component, rather than as a universal fix to any menu that is seen incorrectly. Before adding, check what contexts already exist. If the component uses mix-blend-mode, compare the result on different backgrounds: exactly the interaction with the adjacent layers is part of the behavior that you manage.

Sources

For further detail and to check the information:

  1. [1] MDN — isolation ↗