例如，如果您使用诸如叠加层（这是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 属性background-filter （实际上以部分过滤元素后面的区域而闻名）在这里可以满足您的需求。虽然这里也创建了一个新的堆叠上下文，但它是无关紧要的，因为伪元素中没有子元素:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.