isolation

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

Интерактивный пример

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

Синтаксис

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

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

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

Значения

auto

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

isolate

Новый контекст наложения должен быть создан.

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

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     | (en-US)
  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;
}

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

Specification
Compositing and Blending Level 2
# isolation
Начальное значениеauto
Применяется кВсе элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.
Наследуетсянет
Обработка значениякак указано
Animation typeNot animatable

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

BCD tables only load in the browser

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