isolation: отделен контекст за слоевете на компонент

Полезно е да знаеш

isolation: isolate; изисква елементът да създаде нов контекст на наслагване. При auto такъв контекст възниква само ако друго приложено свойство го налага. MDN посочва полезната връзка на isolation с z-index и режимите на смесване на цветовете. [1]

Примерът .card { isolation: isolate; } прави намерението явно: картата получава собствен контекст. Това не премества автоматично картата над всички други елементи и не изрязва съдържанието ѝ. Подреждането и изрязването остават отделни задачи.

Свойството е подходящо за обмислена граница на визуален компонент, а не като универсална поправка на всяко меню, което се вижда неправилно. Преди добавяне провери какви контексти вече съществуват. Ако компонентът използва mix-blend-mode, сравни резултата върху различни фонове: точно взаимодействието със съседните слоеве е част от поведението, което управляваш.