Hvis du bruger elementer som f.eks. Overlays (som er reglen i tider med GDPR-actionisme) og f.eks. Vil blødgøre området bag overlayet, støder du ofte på problemet med stablingskonteksten . For eksempel, hvis du har elementer placeret absolut eller i en fast position, vises de pludselig anderledes end uden et anvendt filter. Men der er et middel.
Følgende kode illustrerer dette eksempel. Boksen i baggrunden skal faktisk placeres øverst til højre, men den flyttes:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C siger tydeligt: "Det er ikke en fejl, det er en funktion." . Specifikationen forklarer forholdet:
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 er også værd at læse.
Følgende CSS-egenskaber skaber en ny stablingskontekst, så absolutte eller fast placerede underordnede elementer ikke længere opfører sig i forhold til visningen, men til det filtrerede overordnede element:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Men der er en løsning på det oprindelige problem: CSS-egenskabets baggrundsfilter (som faktisk er kendt for delvist at filtrere områder bag elementer) gør, hvad vi vil her. Her genereres også en ny stablingskontekst, men dette er irrelevant, da der ikke er underelementer i pseudo-elementet:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.