「clip-path」が要素の重なり順を変更するのはなぜですか?

クリップパスが重なり順に影響するのはなぜですか?

要素に適用すると、クリップパスは値を指定した CSS の不透明度と同様に機能します。 CSS 仕様によれば、このようなプロパティは積み重ねコンテキストを作成し、それが描画順序に影響を与えます。 elements.

スタッキング コンテキストの形成

スタッキング コンテキストは、特定の順序で配置された子要素を含む 2 次元の平面です。スタッキング コンテキストが確立されると、そのコンテキスト内の要素は前から後ろまたは後ろから前のシーケンスでレンダリングされます。

クリップパスによるペイント順序

描画順序に従って、すべての配置された子孫または不透明度の子孫 (不透明度が 1 未満) が新しいスタッキング コンテキストをアトミックに作成します。これは、それらが独自のスタッキング コンテキストを形成し、ドキュメントの残りの部分から分離されることを意味します。

この例では、クリップパスを持つ要素は、ペイント プロセスの 8 番目のステップでスタッキング コンテキストを作成します。ただし、コード内の画像は位置決めされていないため、フロー内で位置決めされていない要素とみなされます。これは、ペイント プロセスの後のステップ (4) でペイントされることを意味します。

Position:relative とスタック順序

画像に Position:relative を追加することで、基本的に、独自のスタッキング コンテキストを強制的に形成します。これにより、クリップパスを使用したヘッダーとともに、イメージが 8 番目のステップでペイントされることが保証されます。これで、ツリーの順序により、画像はヘッダーの上に配置されます。

結論

後の要素の積み重ね順序に対するクリップパスの影響DOM は、スタッキング コンテキストをアトミックに作成することで発生します。このコンテキスト内の要素は、フロー内で配置されていないと見なされる他の要素の前に描画されます。

以上が「clip-path」が要素の重なり順を変更するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。