What does isolation do in CSS?
The isolation property provides a way for an element to create a stacking context without using any special technique to do so.
Creating new stacking orders prevent an element from acquiring blend-modes from elements in the backdrop.
The following example demonstrate how isolation works with mix-blend-mode
In the example there are two elements with a magenta background. The only difference is the isolation
declaration.
The first box with class isolation-auto
sets isolation to auto
, the default value. This let's the background through, blending it with the background color.
The second box with class isolation-isolate
. This will prevent the background image in the parent element from blending through.
You can find a more technical explanation in the Compositing and Blending Level 2 specification