isolation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

Die isolation-Eigenschaft von CSS 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 einer 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.

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

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: lime; width: 200px; height: 210px; } .small-square { background-color: lime; 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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden