--- title: isolation slug: Web/CSS/isolation tags: - Контекст наложения - Очередность - Порядок отрисовки translation_of: Web/CSS/isolation ---
{{CSSRef}}

CSS-свойство isolation определяет должен ли элемент создавать новый контекст наложения {{glossary("stacking context")}}.

{{EmbedInteractiveExample("pages/css/isolation.html")}}

Это свойство особенно полезно при использовании совместно с {{cssxref("background-blend-mode")}}.

Синтаксис

/* Значения ключевого слова */
isolation: auto;
isolation: isolate;

/* Глобальные значения */
isolation: inherit;
isolation: initial;
isolation: unset;

Свойство isolation указывается в качестве значения одного из нижеследующих ключевых слов.

Значения

auto
Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.
isolate
Новый контекст наложения должен быть создан.

Формальный синтаксис

{{csssyntax}}

Примеры

<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>

.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;
}

{{ EmbedLiveSample('Examples', 230, 230) }}

Спецификации

Спецификация Статус Комментарий
{{ SpecName('Compositing', '#isolation', 'Isolation') }} {{ Spec2('Compositing') }} Первое определение

{{cssinfo}}

Поддержка браузерами

{{Compat("css.properties.isolation")}}

Смотрите также