revision:
- defines whether an element must create a new stacking content.
Note: The isolation property is helpful when used with background-blend-mode or mix-blend-mode.
Property values:
auto : default. A new stacking context is created only if one of the properties applied to the element requires it
isolate : a new stacking context must be created.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<div id="b" class="a">
<div id="d">
<div class="a c">div d: isolation: auto;</div>
</div>
<div id="e">
<div class="a c">div e: isolation: isolate;</div>
</div>
</div>
</div>
<style>
.a {background-color: lightgreen;}
#b {width: 25vw; height: 25vw;}
.c {width: 10vw; height: 10vw; border: .1vw solid black; padding: .2vw; mix-blend-mode: difference;}
#d {isolation: auto;}
#e {isolation: isolate;}
</style>