Si vous utilisez des éléments tels que des superpositions (qui est la règle à l'époque de l'actionnisme du RGPD) et que vous souhaitez adoucir la zone derrière la superposition, par exemple, vous rencontrez souvent le problème du contexte d'empilement . Par exemple, si vous avez des éléments positionnés de manière absolue ou dans une position fixe, ils sont soudainement affichés différemment que sans filtre appliqué. Mais il existe un remède.
Le code suivant illustre cet exemple. La boîte en arrière-plan doit en fait être positionnée en haut à droite, mais elle est déplacée:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
Le W3C le dit clairement ici : "Ce n'est pas un bug, c'est une fonctionnalité." La spécification explique la connexion:
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.
La discussion sur GitHub vaut également la peine d'être lue.
Les propriétés CSS suivantes créent un nouveau contexte d'empilement, de sorte que les éléments enfants positionnés de manière absolue ou fixe ne se comportent plus par rapport à la fenêtre, mais à l'élément parent filtré:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Mais il existe une solution au problème initial : la propriété CSS background-filter (qui est en fait connue pour filtrer partiellement les zones derrière les éléments) fait ce que vous voulez ici. Bien qu'un nouveau contexte d'empilement soit également créé ici, il n'est pas pertinent puisqu'il n'y a aucun élément enfant dans le pseudo-élément:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.