CSS 如何转换 3D 反向兄弟元素堆叠顺序？

如何使用CSS和3D变换实现兄弟元素堆叠顺序反转

理解这个问题，你的目标是确保子元素一致无论它们在 DOM 树中的位置如何，都会出现在其父级后面。虽然 z 索引似乎是一个合适的解决方案，但在这种情况下它通常被证明是无效的。

为了解决这一挑战并实现所需的堆叠顺序反转，现代浏览器现在提供了一种利用 变换 3D 的强大技术 和 CSS.

考虑以下 CSS snippet:

.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);
}

在此示例中，为父元素分配了红色背景和 100px x 100px 的尺寸。它相对定位并利用transform-style:preserve-3d属性来创建3D堆叠上下文。

另一方面，子元素被赋予蓝色背景和相同的尺寸。它绝对位于父级内部，顶部和左侧有轻微的负偏移。至关重要的是，它被分配了一个transform：translateZ（-10px）属性，该属性将其在由父级的transform-style属性创建的3D空间中沿z轴向后移动10px。

因此，尽管它当子元素在 DOM 树中的位置时，由于其在 z 轴上的负平移，子元素实际上出现在其父元素后面。这种技术有效地颠倒了堆叠顺序，确保子级始终位于父级后面。

以上是CSS 如何转换 3D 反向兄弟元素堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！