たとえば、オーバーレイ（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.