例如，如果您使用诸如叠加层（这是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.