Контекст наложения (isolation)link

https://dev.ru.simai.io/ru/ui/utility/layout/isolation.php

isolate управляет созданием отдельного stacking context. Это важно, когда используются mix-blend-* и нужно ограничить их влияние пределами контейнера.

Таблица классовlink

Класс	Значение
`.isolate`	`isolation: isolate;`
`.isolation-auto`	`isolation: auto;`
`.mix-blend-{mode}`	`mix-blend-mode: ...;`

Поддерживаемые mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.

Синтаксисlink

isolate
isolation-auto
mix-blend-{mode}

Примерыlink

isolatelink

<div class="bg-success-tonal">
  <div class="isolate">
    <div class="mix-blend-multiply bg-warning-tonal">...</div>
  </div>
</div>

isolation-autolink

<div class="bg-success-tonal">
  <div class="isolation-auto">
    <div class="mix-blend-multiply bg-warning-tonal">...</div>
  </div>
</div>