isolation

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

/* Valeurs avec mots-clés */
isolation: auto;
isolation: isolate;

/* Valeurs globales */
isolation: inherit;
isolation: initial;
isolation: unset;

Cette propriété s'avère particulièrement utile avec background-blend-mode afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier. Elle permet d'isoler des groupes d'éléments de l'arrière-plan distant et de mélanger ces éléments ensemble.

Syntaxe

Un des mots-clés définis ci-après.

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

Compatibilité des navigateurs

Voir aussi

• <blend-mode>
• mix-blend-mode
• background-blend-mode