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

クリップパスが重なり順を変更する理由: 詳しい説明

CSS の世界では、要素の重なり順を扱うことがよくあります。ここで、コード内でさらに上に位置する要素は、通常、下に位置する要素の上に描画されます。ただし、クリップパスなどの特定のプロパティは、この予想されるスタック順序を乱し、予期しない結果を招く可能性があります。

次の CSS コードを検討してください。

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

見出しに適用した場合 (

)、このコードはクリップパスを使用してカスタムシェイプを定義します。ただし、画像がこの見出しの下に配置されている場合、予期しない動作が発生します。コード内で後の位置にあるため、視覚的にはヘッダーの上に表示されるはずの画像が、ヘッダーの下に表示されてしまいます。

この動作を理解するには、クリップパスが CSS の不透明度と同様に、新しいスタッキングコンテキスト。 CSS によって定義された描画順序では、スタッキング コンテキストを作成する要素は、配置されていない要素の前に配置されます。

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

 - All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
 - All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
 - All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

この例では、clip-path プロパティを持つ要素は手順 8 で描画され、画像はは、位置決めが不足しており、ステップ 4 でペイントされます。コードの後半に表示されているにもかかわらず、画像は、によって作成されたスタッキング コンテキストにより、クリップされたヘッダーの前にペイントされます。 Clip-path.

これを修正するには、画像上で明示的にposition:relativeを定義できます。これにより画像が配置され、クリップされたヘッダーと同じスタッキング コンテキストに配置されます。次に、ツリーの順序によって、画像がヘッダーの上にレンダリングされることが決定されます。

img {
  margin-top: -10em;
  position:relative;
}

結論として、クリップ パスは、CSS の不透明度と同様に、スタック コンテキストを確立し、要素の描画順序に影響を与えます。これらの概念を理解することで、スタッキング動作を制御し、望ましい視覚的結果を達成することができます。

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