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.
La propriété isolation
indique que l'élément crée un nouveau contexte d'empilement (stacking context).
Exemple interactif
Cette propriété s'avère particulièrement utile avec mix-blend-mode
afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.
Syntaxe
css
/* Valeurs avec mots-clés */
isolation: auto;
isolation: isolate;
/* Valeurs globales */
isolation: inherit;
isolation: initial;
isolation: unset;
La propriété isolation
est définie avec l'un des mots-clés suivants.
Valeurs
Définition formelle
Valeur initiale | auto |
---|---|
Applicabilité | Tous les éléments. En SVG, cela s'applique aux éléments de conteneurs, aux éléments graphiques et aux éléments faisant référence à des éléments graphiques. |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | Not animatable |
Syntaxe formelle
isolation =
<isolation-mode>
<isolation-mode> =
auto |
isolate
Exemples
CSS
css
.a {
background-color: rgb(0, 255, 0);
}
#b {
width: 200px;
height: 210px;
}
.c {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
#d {
isolation: auto;
}
#e {
isolation: isolate;
}
HTML
html
<div id="b" class="a">
<div id="d">
<div class="a c">auto</div>
</div>
<div id="e">
<div class="a c">isolate</div>
</div>
</div>
Résultat
Spécifications
Specification |
---|
Compositing and Blending Level 2 # isolation |
Compatibilité des navigateurs
BCD tables only load in the browser