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
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
isolationChrome Полная поддержка 41Edge Нет поддержки НетFirefox Полная поддержка 36IE Нет поддержки НетOpera Полная поддержка 30Safari Полная поддержка ДаWebView Android Полная поддержка 41Chrome Android Полная поддержка 41Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 36Opera Android ? Safari iOS Полная поддержка 8Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

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

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva, mdnwebdocs-bot, AliaksandrZahorski
Обновлялась последний раз: opereverzeva,