Se utilizzi elementi come gli overlay (che è la regola ai tempi dell'azionismo GDPR) e vuoi ammorbidire l'area dietro l'overlay, ad esempio, ti imbatti spesso nel problema del contesto di stacking . Ad esempio, se gli elementi sono posizionati in modo assoluto o fisso, vengono improvvisamente visualizzati in modo diverso rispetto a senza un filtro applicato. Ma c'è un rimedio.
Il codice seguente illustra questo esempio. Il riquadro sullo sfondo dovrebbe effettivamente essere posizionato in alto a destra, ma viene spostato:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
Il W3C dice chiaramente: "Non è un bug, è una caratteristica". . La specifica spiega la relazione:
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.
Vale la pena leggere anche la discussione su GitHub.
Le seguenti proprietà CSS creano un nuovo contesto di impilamento, in modo che gli elementi figlio posizionati in modo assoluto o fisso non si comportino più in relazione alla visualizzazione, ma piuttosto all'elemento padre filtrato:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Ma c'è una soluzione al problema originale: il filtro sullo sfondo della proprietà CSS (che in realtà è noto per filtrare parzialmente le aree dietro gli elementi) fa il lavoro. Anche qui viene generato un nuovo contesto di impilamento, ma questo è irrilevante in quanto non ci sono elementi figlio nello pseudoelemento:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.