We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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;

É especially useful in conjunction with background-blend-mode that only blend background in a given stacking context: it allows to isolate groups of elements from their deeper background and to blend their background color together.

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

One of the keyword values listed below.

Valores

auto
Is a keyword indicating that a new stacking context has to be created only if one properties applied to the element requires it.
isolate
Is a keyword indicating that a new stacking context must be created.

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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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: rener_bz
Última atualização por: rener_bz,