Seite per CSS hinter Overlay weichzeichnen

Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise weichzeichnen, stößt man häufig auf das Problem des Stacking Contexts. Hat man nämlich beispielsweise absolut oder fixiert positionierte Elemente, werden diese plötzlich anders dargestellt als ohne angewendeten Filter. Doch es gibt Abhilfe.


Folgender Code illustriert dieses Beispiel. Die Box im Hintergrund sollte eigentlich am rechten oberen Rand positioniert sein, ist jedoch verschoben:

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

Das W3C sagt hier klar: "It's not a bug, it's a feature.". Die Spezifikation erläutert den Zusammenhang:

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.

Die Diskussion dazu auf GitHub ist ebenfalls lesenswert.

Die folgenden CSS-Eigenschaften erzeugen einen neuen Stacking-Context, sodass absolut oder fixiert positionierte Kind-Elemente sich nicht mehr relativ zum Viewport, sondern zum gefilterten Parent-Element verhalten:

  • filter
  • transform
  • backdrop-filter
  • perspective
  • contain
  • transform-style
  • will-change

Doch es gibt eine Lösung für das ursprüngliche Problem: Die CSS-Eigenschaft backdrop-filter (die man eigentlich für das partielle Filtern von Bereichen hinter Elementen kennt), leistet hier das Gewünschte. Zwar wird auch hier ein neuer Stacking-Context erzeugt, dieser ist jedoch irrelevant, da sich keine Kind-Elemente im Pseudo-Element befinden:

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

Zurück