Als je elementen zoals overlays gebruikt (wat de regel is in tijden van GDPR-actionisme) en bijvoorbeeld het gebied achter de overlay wilt verzachten, kom je vaak het probleem van de stapelcontext tegen . Als u bijvoorbeeld elementen absoluut of in een vaste positie heeft gepositioneerd, worden ze ineens anders weergegeven dan zonder filter. Maar er is een remedie.
De volgende code illustreert dit voorbeeld. Het vak op de achtergrond zou eigenlijk rechtsboven moeten staan, maar het is verplaatst:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
Het W3C zegt hier duidelijk: "Het is geen bug, het is een feature." De specificatie legt de verbinding uit:
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.
De discussie op GitHub is ook het lezen waard.
De volgende CSS-eigenschappen creëren een nieuwe stapelcontext, zodat absoluut of vast gepositioneerde onderliggende elementen zich niet langer gedragen ten opzichte van de viewport, maar eerder ten opzichte van het gefilterde bovenliggende element:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Maar er is een oplossing voor het oorspronkelijke probleem: het CSS-eigenschap -achtergrondfilter (dat eigenlijk bekend staat om het gedeeltelijk filteren van gebieden achter elementen) doet hier wat je wilt. Hoewel hier ook een nieuwe stapelcontext wordt gecreëerd, is deze niet relevant omdat er geen onderliggende elementen in het pseudo-element voorkomen:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.