如何在不使用 Z-index 的情況下將子元素放置在其父元素後面？

如何在沒有Z 索引的情況下將子元素放置在父元素後面

問題

在某些情況下，您可能需要一個子元素出現在下面（或在）其父級，無論它們在DOM 樹中的位置如何。但是，設定 z-index 和position:relative 似乎無法達到此效果。

解決方案

由於 CSS 的進步，您現在可以使用 CSS 3D 轉換來實現此目的。具體方法如下：

背景：紅色；<br>寬度：100px;<br>高度：100px； <br>變換樣式：preserve-3d；<br>位置：相對;<br>}<p>.child {<br>背景：藍色；<br>寬度：100px；<br>高度：100px；<br>位置：絕對；<br>頂部頂部：-5px ;<br> 左：-5px;<br>變換：翻譯Z(-10px)<br>}</p>

父級<br> <div>
<pre class="brush:php;toolbar:false">Child

在此例如：

1. 父div 具有transform-style:preserve-3d 屬性，可為元素及其子元素啟用 3D 變換。
2. 子 div 絕對位於元素內父級。
3. 子級上的變換：translateZ(-10px) 屬性將其沿著子級向後移動 10 像素z 軸。

因此，子元素將出現在父元素後面，覆蓋它而不遮擋其視圖。此技術適用於所有現代瀏覽器。

以上是如何在不使用 Z-index 的情況下將子元素放置在其父元素後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！