isolation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

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

Синтаксис

css

/* Ключевые слова */
isolation: auto;
isolation: isolate;

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

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

Значения

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

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

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  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>

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

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

Specification
Compositing and Blending Level 2 # isolation

Начальное значение	`auto`
Применяется к	Все элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.
Наследуется	нет
Обработка значения	как указано
Animation type	Not animatable

Совместимость с браузерами

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.