如何在不使用 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>}

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

< /pre>

在此例如：

1. 父 div 具有 transform-style:preserve-3d 属性，该属性可以为元素及其子元素启用 3D 变换。
2. 子 div 绝对位于元素内父级。
3. 子级上的变换：translateZ(-10px) 属性将其沿着子级向后移动 10 像素z 轴。

因此，子元素将出现在父元素后面，覆盖它而不遮挡其视图。该技术适用于所有现代浏览器。