たとえば、オーバーレイ（GDPRアクション主義の時代のルール）などの要素を使用していて、オーバーレイの背後の領域を柔らかくしたい場合、スタッキングコンテキストの問題に遭遇することがよくあります。 たとえば、要素が絶対位置または固定位置にある場合、フィルターが適用されていない場合とは異なる方法で突然表示されます。 しかし、救済策があります。
次のコードは、この例を示しています。 背景のボックスは実際には右上に配置する必要がありますが、移動します:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C はここではっきりと「これはバグではなく、機能です」と述べています。仕様では接続が説明されています:
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.
GitHubに関する議論も読む価値があります。
次のCSSプロパティは、新しいスタッキングコンテキストを作成します。これにより、絶対的または固定的に配置された子要素は、ビューポートに対してではなく、フィルタリングされた親要素に対して動作します。:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
しかし、元の問題には解決策があります。CSS プロパティのbackdrop-filter (実際には、要素の背後の領域を部分的にフィルターすることで知られています) が、ここで必要なことを実行します。ここでも新しいスタッキングコンテキストが作成されますが、擬似要素には子要素がないため無関係です。:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.