isolation
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
/* 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
auto-
Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé uniquement si une propriété appliquée à l'élément le rend nécessaire.
isolate-
Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé.
Syntaxe formelle
auto | isolate
Exemples
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
<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
| Spécification | État | Commentaires |
|---|---|---|
| Compositing and Blending Level 1 La définition de 'Isolation' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
| 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 | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser