isolation
La propriété isolation
indique que l'élément crée un nouveau contexte d'empilement (stacking context).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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