Якщо ви використовуєте такі елементи, як накладання (що є правилом за часів дії 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 (який насправді відомий частковою фільтрацією областей позаду елементів) виконує свою роботу. Тут також створюється новий контекст стекування, але це не має значення, оскільки в псевдоелементі немає дочірніх елементів:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.