Если вы используете такие элементы, как оверлеи (что является правилом во времена акционизма 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
Но есть решение исходной проблемы: свойство backdrop-filter CSS (которое на самом деле известно тем, что частично фильтрует области за элементами) делает то, что мы хотим здесь. Здесь также создается новый контекст наложения, но это не имеет значения, поскольку в псевдоэлементе нет дочерних элементов.:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.