If you use elements such as overlays (which is the rule in times of GDPR actionism) and want to soften the area behind the overlay, for example, you often come across the problem of the stacking context . For example, if you have elements positioned absolutely or in a fixed position, they are suddenly displayed differently than without an applied filter. But there is a remedy.
The following code illustrates this example: The box in the background should be positioned at the top right edge, but is moved:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
The W3C clearly states here: "It's not a bug, it's a feature" The specification explains the context:
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.
The discussion on GitHub is also worth reading.
The following CSS properties create a new stacking context so that absolute or fixed child elements no longer behave relative to the viewport but relative to the filtered parent element:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
But there is a solution to the original problem: The CSS property backdrop-filter (which is actually known for partially filtering areas behind elements) does what we want here. A new stacking context is also generated here, but this is irrelevant as there are no child elements in the pseudo-element:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.