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 qui: "Non è un bug, è una funzionalità". La specifica spiega la connessione:
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: la proprietà CSS background-filter (che in realtà è nota per filtrare parzialmente le aree dietro gli elementi) fa quello che vuoi qui. Anche se qui viene creato anche un nuovo contesto di stack, questo è irrilevante poiché non ci sono elementi figlio nello pseudo-elemento:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.