Что такое изоляция стилей в CSS

В CSS элементы изолируются с помощью свойства isolation, которое определяет, должен ли элемент создавать новый контекст стекирования (stacking context).

Основные сценарии изоляции:

1. Изоляция контекста стекирования — предотвращает влияние z-index дочерних элементов на другие элементы вне родителя.
2. Изоляция смешивания (mix-blend-mode) — ограничивает эффект наложения только внутри изолированного элемента.

Пример:

.parent {
  isolation: isolate; /* Создаёт новый контекст стекирования */
}

.child {
  position: relative;
  z-index: 999; /* Не повлияет на элементы вне .parent */
}

Также изоляция происходит автоматически при использовании:

• opacity < 1
• transform, filter, perspective
• position: fixed/sticky (в некоторых браузерах)