isolation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 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 valueauto
Aplica-se aAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inheritednão
Computed valueas specified
Animation typeNot animatable

Sintaxe

Uma das palavras-chave listadas abaixo.

Valores

auto

É uma palavra-chave indicando que um novo stacking context deve ser criado somente se uma das propriedades aplicadas ao elemento requererem.

isolate

É uma palavra-chave indicando que um novo stacking context deve ser criado.

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

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também