Isolation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨enero de 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
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 |