isolation CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die CSS-Eigenschaft isolation bestimmt, ob ein Element einen neuen Stapelkontext erstellen muss.
Diese Eigenschaft ist besonders hilfreich, wenn sie zusammen mit mix-blend-mode und z-index verwendet wird.
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;
}
Syntax
css
/* Keyword values */
isolation: auto;
isolation: isolate;
/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;
Werte
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
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 Stapelkontexts 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
| Spezifikation |
|---|
| Compositing and Blending Module Level 2 # isolation |