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.

Die isolation CSS Eigenschaft bestimmt, ob ein Element einen neuen Stacking-Kontext erstellen muss.

Probieren Sie es aus

isolation: auto;

isolation: isolate;

<section class="default-example" id="default-example">
  <div class="background-container">
    <div id="example-element">
      <img src="/shared-assets/images/examples/firefox-logo.svg" />
      <p><code>mix-blend-mode: multiply;</code></p>
    </div>
  </div>
</section>

.background-container {
  background-color: #f4f460;
  width: 250px;
}

#example-element {
  border: 1px solid black;
  margin: 2em;
}

#example-element * {
  mix-blend-mode: multiply;
  color: #8245a3;
}

Diese Eigenschaft ist besonders hilfreich in Verbindung mit mix-blend-mode und z-index.

Syntax

css

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

/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

Die isolation Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

auto: Ein neuer Stacking-Kontext wird nur erstellt, wenn eine der auf das Element angewendeten Eigenschaften dies erfordert.
isolate: Ein neuer Stacking-Kontext muss erstellt werden.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Alle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate

Beispiele

Einen neuen Stacking-Kontext für ein Element erzwingen

HTML

html

<div class="big-square">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>

CSS

css

.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0 255 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0 255 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}

Ergebnis

Spezifikationen

Specification
Compositing and Blending Level 2 # isolation