Zインデックスを使用せずに子要素を親の後ろに配置するにはどうすればよいですか?

Z インデックスを使用せずに子要素を親の後ろに配置する方法

質問

一部のシナリオでは、子要素を下に表示する必要がある場合があります。 DOM ツリー内の位置に関係なく、その親 (またはその後ろ) に配置されます。ただし、z-index とposition:相対を設定してもこの効果は得られないようです。

解決策

CSS の進歩のおかげで、CSS 3D 変換を使用してこれを実現できるようになりました。方法は次のとおりです:

 背景: 赤;<br> 幅: 100px;<br> 高さ: 100px; <br> 変換スタイル: 保存 3d;<br> 位置:相対;<br>}</p><p>.child {<br> 背景: 青;<br> 幅: 100px;<br> 高さ: 100px;<br> 位置: 絶対;<br> 上部: -5px ;<br> 左: -5px;<br> 変換: translationZ(-10px)<br>}

 親<br> <div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Child

ログイン後にコピー

< /pre>

この中で例:

1. 親 div には、transform-style:preserve-3d プロパティがあり、要素とその子の 3D 変換が可能になります。
2. 子 div は、 parent.
3. 子のtransform:translateZ(-10px)プロパティは、子の方向に沿って10ピクセル後方に移動します。 z-axis.

その結果、子要素は親の背後に表示され、ビューを遮ることなく親要素に重なって表示されます。この手法は、最新のすべてのブラウザで機能します。

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