isolation - CSS : Feuilles de style en cascade

La propriété isolation indique que l'élément crée un nouveau contexte d'empilement (stacking context).

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