Если вы используете такие элементы, как оверлеи (что является правилом во времена акционизма 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.