Om du använder element som överlägg (vilket är regeln i tider med GDPR-actionism) och till exempel vill mjuka upp området bakom överlägget, stöter du ofta på problemet med staplingskontext . Till exempel, om du har element placerade absolut eller i en fast position, visas de plötsligt annorlunda än utan ett applicerat filter. Men det finns ett botemedel.
Följande kod illustrerar detta exempel. Rutan i bakgrunden ska faktiskt placeras längst upp till höger, men den är förskjuten:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C säger tydligt här: "Det är inte en bugg, det är en funktion." Specifikationen förklarar sambandet:
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.
Diskussionen om GitHub är också värt att läsa.
Följande CSS-egenskaper skapar ett nytt staplingskontext så att absolut eller fast placerade underordnade element inte längre beter sig i förhållande till visningsområdet utan till det filtrerade överordnade elementet:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Men det finns en lösning på det ursprungliga problemet: CSS-egenskapen backdrop-filter (som faktiskt är känt för att delvis filtrera områden bakom element) gör vad du vill här. Även om ett nytt staplingskontext också skapas här är det irrelevant eftersom det inte finns några underordnade element i pseudoelementet:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.