「clip-path」は CSS の要素の積み重ね順序にどのような影響を与えますか?

クリップパスが DOM 内の要素の積み重ね順序に与える影響

クリップパスは、クリッピング領域を作成する CSS プロパティです。要素のコンテンツのどの部分を表示するかを定義します。ただし、これはスタック順序に予期せぬ影響を及ぼし、DOM 内でクリップ パスを持つ要素の下に要素が配置されます。

問題の原因

これが発生する理由は次のとおりです。 、CSS 仕様によれば、ゼロ以外のクリップパス値を使用すると、スタッキング コンテキストが作成されます。スタッキング コンテキストは、要素が Z インデックスに従ってレンダリングおよび階層化される 3 次元空間です。

クリップ パスの場合、クリップ パスを持つ要素は新しいスタッキング コンテキストに配置されます。 、および明示的に配置されていない後続の要素は、元のスタッキング コンテキストでレンダリングされます。これは、クリップパスを持つ要素が、DOM 内で後から表示される場合でも、明示的に配置しない要素と重なることを意味します。

問題の修正

この問題を解決するには、次の手順を実行します。クリップパスを使用して要素の位置を「相対」または「絶対」に明示的に設定できます。これにより、クリップパスによって作成された新しいスタッキング コンテキストに要素が移動します。これにより、DOM 内の後の要素がクリップパスを持つ要素の上に残るようになります。

例

次の CSS コードを考えてみましょう:

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

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
}

最初は、ヘッダーのクリップパスにより、画像はヘッダーの後ろに隠れています。画像に「位置:相対」を設定すると、ヘッダーと同じスタッキングコンテキストに移動し、その上に表示されます:

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

結論

クリップの使用-path は、後続の要素のスタック順序に影響を与えるスタック コンテキストを作成します。正しい階層化を確保するには、クリップパスを使用して要素の位置を「相対」または「絶対」に明示的に設定するか、要素の重なりを制御する他の手法の使用を検討してください。

以上が「clip-path」は CSS の要素の積み重ね順序にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。