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-Eigenschaft von CSS 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 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 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

Anfangswertauto
Anwendbar aufAlle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt.
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate

Beispiele

Erzwingen eines neuen Stacking-Kontexts 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch