isolation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janeiro de 2020.
A propriedade CSS isolation define se o elemento deve criar um novo stacking context.
css
/* Keyword values */ isolation: auto; isolation: isolate; /* Global values */ isolation: inherit; isolation: initial; isolation: unset; É especialmente útil em conjunto com background-blend-mode que mistura os fundos em um dado stacking context: ela permite isolar grupos de elementos dos seus fundos e misturar as suas cores.
| Initial value | auto |
|---|---|
| Aplica-se a | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |
Sintaxe
Uma das palavras-chave listadas abaixo.
Valores
Sintaxe formal
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Exemplos
html
<div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css
.a { background-color: rgb(0, 255, 0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } Especificações
| Specification |
|---|
| Compositing and Blending Level 2 # isolation |