Якщо ви використовуєте такі елементи, як накладання (що є правилом за часів дії GDPR) і хочете, наприклад, пом'якшити область за накладанням, ви часто стикаєтеся з проблемою контексту укладання . Наприклад, якщо у вас є елементи, розташовані абсолютно або у фіксованому положенні, вони раптом відображаються інакше, ніж без застосованого фільтра. Але є засіб.
Наступний код ілюструє цей приклад. Поле на задньому плані насправді повинно розташовуватися вгорі праворуч, але воно переміщується:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C тут чітко каже: «Це не помилка, це функція». Специфікація пояснює підключення:
A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.
Дискусію на GitHub також варто прочитати.
Наступні властивості CSS створюють новий контекст стекування, так що абсолютно або фіксовані позиційні дочірні елементи більше не поводяться відносно області перегляду, а скоріше відфільтрованого батьківського елемента:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Але є вирішення початкової проблеми: властивість CSS backdrop-filter (яка насправді відома тим, що частково фільтрує області за елементами) тут робить те, що ви хочете. Хоча тут також створюється новий контекст стекування, він не має значення, оскільки в псевдоелементі немає дочірніх елементів:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.