CSS を使用して子要素を親の後ろに表示するにはどうすればよいですか?

Z インデックスの問題: 子要素を親の後ろに表示する

ドキュメント オブジェクト モデル (DOM) で子要素を親の後ろに表示するという望ましい視覚効果を達成する) ツリーは複雑な作業になる可能性があります。 z-index プロパティは広く実装されているにもかかわらず、期待した結果が得られないことがあります。

特に最新のブラウザでこの問題に対処する信頼できるアプローチの 1 つは、CSS3 の Transform 3D プロパティを活用することです。この手法は近年注目を集めており、この長年の課題に対する回避策を提供します。

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px);
}

この例では、親要素に prepare-3d の変換スタイルが与えられ、 3D レンダリング コンテキストの。子要素は親内に絶対的に配置され、top プロパティと left プロパティを介してわずかにオフセットされます。最後に、translateZ(-10px) という変換が子に適用され、効果的に Z 次元で逆方向に送信されます。

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

この手法により、子要素を親の背後に表示しながら、親と重なることができます。望ましい視覚効果を提供します。これにより、絶対位置または固定位置の必要性がなくなり、動的要素の設計に大きな柔軟性がもたらされます。

以上がCSS を使用して子要素を親の後ろに表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。