Webkit フィルターのスタック順序変更の原因を明らかにする

Web 開発では、要素の望ましいスタック順序を維持することが多くの場合重要です。ただし、特定のアクションによってこの順序が崩れ、開発者が困惑する可能性があります。このような例の 1 つは、Webkit フィルターを画像に適用するときに発生します。

Webkit フィルターが適用された画像の上にマウスを置くと、重なり順が不可解にも変化することがあります。この不可解な現象は、多くの憶測と不満の的となってきました。

ありがたいことに、その答えは CSS 仕様の領域にあります。 Webkit Filter プロパティに none 以外の値を割り当てると、スタッキング コンテキストが確立されます。 CSS 仕様で定義されているこの概念は、問題の要素が他の要素のコンテナになり、ビジュアル階層に別のレイヤーを作成することを規定しています。

仕様どおり:

"A none 以外の計算値は、CSS の不透明度と同じ方法でスタッキング コンテキストを作成します。"

これは、Webkit フィルターを画像に適用すると、既存のスタッキングをオーバーライドする新しいスタッキング コンテキストが作成されることを意味します。

この基礎となるメカニズムを理解すると、開発者は、ページ上の他の要素を混乱させる可能性がある Z インデックスに頼ることなく、重なり順の問題を解決できるようになります。