Flouter la page derrière la superposition en utilisant CSS

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 dit clairement: "Ce n'est pas un bug, c'est une fonctionnalité." . La spécification explique la relation:

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 d'origine: la propriété CSS backdrop-filter (qui est en fait connue pour filtrer partiellement les zones derrière les éléments) fait ce que nous voulons ici. Un nouveau contexte d'empilement est également généré ici, mais ce n'est pas pertinent car il n'y a pas d'élément enfant dans le pseudo-élément:

See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.

Retour