изоляция

Базовая линия Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

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

Попробовать

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

Синтаксис

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

Свойство isolation задаётся как одно из ключевых значений, перечисленных ниже.

Значения

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

Формальное определение

Начальное значение	`auto`
Применимо к	Все элементы. В SVG оно применяется к контейнерным элементам, графическим элементам и графическим элементам ссылок.
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

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

isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate

Примеры

Принудительное создание нового контекста стекирования для элемента

HTML

<div class="big-square ">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>

CSS

.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0 255 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0 255 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}

Результат

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

Спецификация
Компоновка и смешивание Уровень 2 # isolation

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`isolation`	41	79	36	30	8	41	36	30	8	4.0	41

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/isolation