isolation

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

Это свойство особенно полезно при использовании совместно с background-blend-mode.

Синтаксис

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

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

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

Значения

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

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

auto | isolate

Примеры

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

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

Спецификация Статус Комментарий
Compositing and Blending Level 1
Определение 'Isolation' в этой спецификации.
Кандидат в рекомендации Первое определение
Начальное значениеauto
Применяется кВсе элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

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

BCD tables only load in the browser

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