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 CSSisolation define se o elemento deve criar um novostacking context.

css

/* Keyword values */isolation: auto;isolation: isolate;/* Global values */isolation: inherit;isolation: initial;isolation: unset;

É especialmente útil em conjunto combackground-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

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>  <div>    <div>auto</div>  </div>  <div>    <div>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;}