クリップパスが要素のスタック順序に影響を与えるのはなぜですか?

クリップパスによってスタック順序が変わる理由

要素にクリップパスが適用されると、不透明度がスタック順序に影響を与えるのと同様に、新しいスタックコンテキストが作成されます。これは CSS 仕様で指定されており、「計算された値が none 以外の場合も同様にスタッキング コンテキストが作成されます」と規定されています。 CSS の不透明度は 1 以外の値に対して適用されます."

重なり順はペイント中に決定されます。次の手順が順番に実行されます。

1. 位置、不透明度が 1 未満の要素、またはなし以外の変換では、新しいスタッキング コンテキストが作成されます。
2. z-index で配置された子孫: autoまたは z-index: 0 は親スタッキング コンテキストに配置されます。
3. フロー内、位置決めされていない子孫は親に配置されますstacking context.

この例では、ステップ 1 でクリップパスを持つ要素がペイントされ、新しいスタッキング コンテキストが作成されます。位置が設定されていない画像要素は、クリップパス要素によって作成されたスタッキング コンテキストの後にステップ 3 でペイントされます。

これが、画像がヘッダーの下に表示される理由です。 DOM コードの後半で表示されます。

解決策:

この問題を解決するには、position:relative を on に設定します。画像要素。これにより、画像は通常の位置を基準にして配置されるため、ステップ 1 のクリップパス要素によって作成されたスタッキング コンテキストに挿入されます。その結果、画像はヘッダー要素の上に表示されます。

不透明度の例:

不透明度でも同じ動作が観察されます。ヘッダー要素の不透明度が 1 未満の場合、新しいスタッキング コンテキストも作成され、画像は位置プロパティなしでその下に表示されます。

以上がクリップパスが要素のスタック順序に影響を与えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。