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 Context 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 nützlich 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 eines der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

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

Formelle 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

Erzwingen eines neuen Stacking Contexts für ein Element

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