Propiedad CSS isolation — Control de contextos de apilamiento

La propiedad CSS isolation controla si un elemento debe crear un nuevo contexto de apilamiento. Sus dos valores son auto (el predeterminado — dejar que el navegador decida) e isolate (siempre crear uno, incondicionalmente).

Un contexto de apilamiento es una capa autónoma que el navegador pinta como una unidad. Los elementos dentro de él se ordenan entre sí usando z-index, pero nunca se entrelazan con elementos de un contexto de apilamiento diferente. Cada documento comienza con un contexto de apilamiento raíz; se crean más cuando se aplican ciertas propiedades CSS.

isolation es más útil junto a mix-blend-mode. De forma predeterminada, mix-blend-mode mezcla un elemento con todo lo que hay apilado debajo de él — incluido el fondo de la página y secciones no relacionadas más arriba en el DOM. Establecer isolation: isolate en un padre crea un límite: la mezcla ocurre solo dentro del subárbol de ese padre, no con el resto de la página.

Cuando se usa background-blend-mode, isolation no es necesario — las capas de fondo solo se mezclan con otras capas de fondo del mismo elemento.

Cuándo usarlo

Delimitar un grupo de mezcla. Tienes imágenes o texto superpuestos que usan mix-blend-mode y quieres que se mezclen entre sí, pero no con el resto de la página. Envuélvelos en un contenedor con isolation: isolate.
Proteger un componente reutilizable. Una tarjeta o widget debe verse igual independientemente del fondo sobre el que esté. Aislar su raíz evita que los colores externos se filtren a través de los modos de mezcla internos.
Crear un contexto de apilamiento sin efectos secundarios. Varias propiedades crean contextos de apilamiento implícitamente — opacity por debajo de 1, transform, filter, will-change, y un z-index distinto de auto en un elemento posicionado — pero todas cambian el diseño o la apariencia. isolation: isolate crea el contexto de apilamiento y nada más.

Información

isolation no cambia cómo se ve el elemento ni cómo se asigna el espacio. Su único efecto es si se crea un nuevo contexto de apilamiento. Esto lo convierte en la forma más limpia de establecer el límite cuando se necesita uno sin otras consecuencias visuales.

Referencia de la propiedad


Valor inicial	`auto`
Se aplica a	Todos los elementos
Heredada	No
Animable	No
Versión	CSS3
Sintaxis DOM	`element.style.isolation = "isolate"`

Sintaxis

isolation: auto | isolate | initial | inherit;

Valores

Valor	Descripción
`auto`	No se crea un nuevo contexto de apilamiento a menos que otra propiedad (como `mix-blend-mode` o `filter`) lo requiera. Este es el valor predeterminado.
`isolate`	Siempre crea un nuevo contexto de apilamiento en el elemento, confinando las operaciones de mezcla y composición a ese contexto.
`initial`	Restablece la propiedad a su valor predeterminado (`auto`).
`inherit`	Hereda el valor del elemento padre.

Ejemplos

Contener mix-blend-mode con isolation

Los dos cuadros a continuación usan un marcado interno idéntico — un <div> con mix-blend-mode: difference. La única diferencia es el contenedor: el primero usa isolation: auto; el segundo usa isolation: isolate.

Con auto, la mezcla difference atraviesa el contenedor y se mezcla con el fondo gris de la página (#ccc del contenedor exterior). Con isolate, se crea un nuevo contexto de apilamiento a nivel del contenedor, de modo que la mezcla solo ve el fondo propio del contenedor — no la página circundante.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        background-color: #ccc;
      }
      #isolation-example {
        width: 300px;
        height: 300px;
      }
      .c {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        padding: 10px;
        mix-blend-mode: difference;
      }
      #isolation-example1 {
        isolation: auto;
      }
      #isolation-example2 {
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div id="isolation-example" class="a">
      <div id="isolation-example1">
        <div class="a c">isolation: auto;</div>
      </div>
      <div id="isolation-example2">
        <div class="a c">isolation: isolate;</div>
      </div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Aislar un encabezado mezclado sobre una imagen

Aquí un encabezado usa mix-blend-mode: overlay para mezclarse con una foto. Sin isolation: isolate en el encabezado, la superposición también se mezcla con el fondo del body (#eee) donde el encabezado se extiende más allá de la imagen. Agregar isolation: isolate confina la mezcla al propio contexto de apilamiento del encabezado, manteniendo el efecto consistente a lo largo del ancho completo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #eee;
        color: #555;
        font-size: 1.1em;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .isolation-example {
        margin: 1em auto;
        width: 100%;
        max-width: 814px;
        position: relative;
      }
      img {
        width: 100%;
      }
      .isolation-example h1 {
        position: absolute;
        top: 5em;
        color: white;
        text-align: center;
        font-size: 40px;
        width: 100%;
        text-transform: uppercase;
        background-color: #000;
        padding: .5em .25em;
        mix-blend-mode: overlay;
        isolation: isolate;
      }
    </style>
  </head>
  <body>
    <h2>Isolation property example</h2>
    <div class="isolation-example">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree." />
      <div class="element">
        <h1>House</h1>
      </div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Cómo se crean los contextos de apilamiento

isolation: isolate es una de las muchas formas de activar un nuevo contexto de apilamiento. La siguiente tabla enumera los activadores más comunes y si tienen efectos secundarios visuales o de diseño:

Activador	Efecto secundario
`isolation: isolate`	Ninguno — solo contexto de apilamiento
`opacity` menor que `1`	Cambia la transparencia del elemento
transform (cualquier valor excepto `none`)	Mueve o remodela el elemento
filter (cualquier valor excepto `none`)	Aplica un efecto visual
will-change con `transform` u `opacity`	Puede promover el elemento a su propia capa de composición
`z-index` distinto de auto en un elemento posicionado	Cambia el orden de apilamiento

Cuando necesitas solo el límite — sin transparencia, sin cambio visual, sin reordenamiento — usa isolation: isolate.

Cosas a tener en cuenta

isolation no se hereda. Establecerlo en un padre no hace que los hijos obtengan sus propios contextos de apilamiento.
La propiedad solo tiene efecto en elementos que participan en un contexto de apilamiento por sí mismos (en la práctica, todos los elementos de nivel bloque e inline, elementos SVG, y los hijos de flex/grid).
Inspecciona los límites del contexto de apilamiento con las DevTools del navegador: Firefox muestra el ícono de contexto de apilamiento junto a los elementos en el panel de Capas; Chrome muestra información del contexto de apilamiento en la pestaña Computed.
La compatibilidad con navegadores es excelente — todos los navegadores evergreen han soportado isolation desde 2015. No se necesita ningún prefijo.

Propiedades relacionadas

mix-blend-mode — mezcla un elemento con el contenido que hay debajo; isolation controla dónde se detiene esa mezcla.
background-blend-mode — mezcla las capas de fondo propias de un elemento entre sí.
filter — aplica efectos gráficos como desenfoque y escala de grises; también crea un contexto de apilamiento implícitamente.
opacity — otro activador de contexto de apilamiento; los valores por debajo de 1 hacen el elemento semitransparente.
transform — mueve, rota o escala un elemento; también crea un contexto de apilamiento.
z-index — controla el orden de apilamiento dentro de un contexto de apilamiento.

Práctica

¿Qué hace la propiedad CSS 'isolation'?

Habilita el reconocimiento de voz.Controla si se debe crear un nuevo contexto de apilamiento local.Cambia el color del texto.Ayuda a aislar un elemento de su fondo y cambia el orden de apilamiento de un conjunto de elementos.