isolation

Определение и применение

Свойство isolation позволяет создать для элемента отдельный контекст наложения — группу, внутри которой сравниваются уровни z-index. Это помогает удержать декоративные слои внутри карточки и отделить смешивание её содержимого от фона за карточкой.

Почему большой z-index не всегда поднимает элемент над соседями — в уроке «Позиционирование элементов. Часть 2: sticky и z-index».

Попробуйте значения isolation

Оранжевый круг смешивается с фоном через mix-blend-mode: multiply. При isolate круг смешивается только с содержимым карточки; при auto учитывается и голубой фон за ней.

Значение свойстваisolation: auto;isolation: isolate;

isolation: auto

HTML и CSS примера

HTML

<div class="stage">
  <div class="backdrop">
    <div class="demo-target">
      <div class="spot"></div>
      <span>Карточка</span>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.backdrop {
  padding: 30px;
  background: linear-gradient(90deg, #72bde3 50%, white 50%);
}
.demo-target {
  position: relative;
  height: 130px;
  border: 2px solid #172c3d;
  isolation: auto;
}
.spot {
  position: absolute;
  inset: 15px;
  background: #ef9f52;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.demo-target span {
  position: relative;
  background: white;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.backdrop {
  padding: 30px;
  background: linear-gradient(90deg, #72bde3 50%, white 50%);
}
.demo-target {
  position: relative;
  height: 130px;
  border: 2px solid #172c3d;
  isolation: isolate;
}
.spot {
  position: absolute;
  inset: 15px;
  background: #ef9f52;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.demo-target span {
  position: relative;
  background: white;
}

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

Спецификация: compositing

Поддерживается во всех основных браузерах с 2020 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.isolation
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`isolation`	✓41	✓79	✓36	✓28	✓8	✓41	✓36	✓28	✓8	✓4.0	✓41	✓8
`auto`	✓41	✓79	✓36	✓28	✓8	✓41	✓36	✓28	✓8	✓4.0	✓41	✓8
`isolate`	✓41	✓79	✓36	✓28	✓8	✓41	✓36	✓28	✓8	✓4.0	✓41	✓8

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

isolation: auto | isolate;

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

| разделяет варианты.

JavaScript синтаксис:

JavaScript

element.style.isolation = "isolate";

Начальное значение свойства

auto.

Значения свойства

Значения isolation
Значение	Описание
`auto`	Само свойство не требует нового контекста. Он всё равно может возникнуть из-за `transform`, прозрачности, позиционирования с `z-index` или других причин. Начальное значение.
`isolate`	Создаёт новый контекст наложения и изолированную группу для смешивания.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `isolation` устанавливает его начальное значение свойства.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Что остаётся внутри группы

Число z-index у потомка сравнивается с уровнями внутри его контекста. Даже z-index: 9999 не поднимет потомка выше соседнего внешнего контекста, стоящего над всей карточкой. Если нужно изменить порядок карточек, задайте уровень самим карточкам.

isolation: isolate само по себе не создаёт содержащий блок для position: absolute, не обрезает содержимое и не изолирует CSS-селекторы. Для привязки абсолютного декора нужен position: relative, для обрезки — отдельное решение. При mix-blend-mode изоляция ограничивает смешивание фоном группы; с прозрачным фоном эффект может отличаться от смешивания с фоном страницы.

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

Compositing and Blending — isolation.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Декор с отрицательным уровнем

Полоса лежит позади текста, но внутри карточки. Поменяйте isolate на auto: отрицательный слой может уйти за фон карточки. Позиционирование и изоляция решают разные задачи.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.card {
    padding: 40px 16px;
    background: #e2e8f0;
    border: 2px solid #475569;
}
.stripe {
    background: #fbbf24;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Декор с отрицательным уровнем</title>
  </head>
  <body>
    <div class="card"><span class="stripe" aria-hidden="true"></span>Прогулки по лесу</div>
  </body>
</html>

style.css

CSS

.card {
    position: relative;
    isolation: isolate;
}
.stripe {
    position: absolute;
    inset: 28px 0;
    z-index: -1;
}