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.

Resumen

La propiedad CSS isolation define si el elemento debe crear un nuevo stacking context.

Esto es especialmente útil en conjunto con background-blend-mode que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.

Valor inicial	`auto`
Applies to	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Heredable	no
Valor calculado	como se especifica
Animation type	Not animatable

Sintaxis

css

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

Valores

auto: Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere.
isolate: Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado.

Sintaxis formal

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate

Ejemplos

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;
}

Especificaciones

Specification
Compositing and Blending Level 2 # isolation

Compatibilidad con navegadores

BCD tables only load in the browser