Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade CSS isolation define se o elemento deve criar um novo stacking context.

/* 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
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

auto | isolate

Exemplos

<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>
.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 Status Comment
Compositing and Blending Level 1
The definition of 'Isolation' in that specification.
Candidata a Recomendação Initial definition

Compatibilidade com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support

41.0

36 (36) Não suportado 30 7.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support

41.0

36.0 (36) Não suportado 36 8.0

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: ni-reis, mdnwebdocs-bot, rener_bz
Última atualização por: ni-reis,