Контекст наложения

Класс isolate задаёт isolation: isolate: элемент создаёт свой контекст наложения, и его потомки смешиваются и упорядочиваются по оси z только внутри него. Берите его вместе с mix-blend-*, когда смешивание должно ограничиться группой, и когда z-index потомков не должен соперничать со слоями страницы.

Пример

В обоих образцах блок с mix-blend-multiply стоит внутри группы на цветном фоне. Подпись над образцом — класс, который стоит на группе: без отдельного контекста блок смешивается с фоном снаружи, с isolate — нет.

<div class="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">isolation-auto</code>
    <div class="p-3 bg-primary color-on-primary radius-ui">
      Фон снаружи группы
      <div class="isolation-auto m-top-1">
        <div class="mix-blend-multiply p-2 bg-tertiary color-on-tertiary radius-ui">mix-blend-multiply</div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">isolate</code>
    <div class="p-3 bg-primary color-on-primary radius-ui">
      Фон снаружи группы
      <div class="isolate m-top-1">
        <div class="mix-blend-multiply p-2 bg-tertiary color-on-tertiary radius-ui">mix-blend-multiply</div>
      </div>
    </div>
  </div>
</div>

Классы

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:isolate.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Ограничить смешивание

Поставьте isolate на ближайшего общего родителя смешиваемых слоёв. Внутри группы слои смешиваются друг с другом, а фон за группой остаётся нетронутым.

<div class="bg-primary color-on-primary p-3">
  <div class="isolate">
    <div class="mix-blend-multiply bg-tertiary p-2">Смешивается только внутри группы</div>
  </div>
</div>

Ограничить z-index

Внутри элемента с isolate значения z-index потомков сравниваются только между собой: слой внутри карточки с isolate не поднимется над позиционированной шапкой страницы, даже если его z-index больше.

Вернуть обычное поведение

isolation-auto возвращает значение по умолчанию, например на части экранов:

<div class="isolate md:isolation-auto"></div>

Ограничения

• Контекст наложения создают и другие свойства: opacity меньше 1, transform, filter, position с z-index. На таком элементе isolation-auto контекст не убирает.
• auto — второе имя isolation-auto с тем же значением. Пишите isolation-auto: короткое имя не говорит, какое свойство оно меняет.
• У семейства нет префиксов состояния.

См. также

• Смешивание цветов
• Положение элемента по оси Z