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: "Det är inte ett fel, det är en funktion." . Specifikationen förklarar förhållandet:
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-egenskapens bakgrundsfilter (som faktiskt är känt för att delvis filtrera områden bakom element) gör jobbet. Här skapas också ett nytt staplingskontext, men detta är 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.