如何在 CSS 中让子元素出现在其父元素的后面

过去的一种常见情况是，您在另一个元素中有一个元素，您希望它出现在父元素的后面。例如：

    <div class="parent">
        I am the parent
        <div class="child">
            I am the child, but I want to be behind my parent
        </div>
    </div>

默认情况下会产生如下结果：

I am the parent

I am the child, but I want to be behind my parent

要使其正常工作，您必须将孩子从父母中移除，这并不总是可能的。使用现代 CSS，您可以通过沿 Z 轴平移元素来解决此问题。对于我们的示例，这需要将以下代码添加到子级和父级：

.parent {
    transform-style: preserve-3d;
}
.child {
    transform: translateZ(-10px)
}  

我们最终的 CSS 如下所示：

    .parent {
        background: linear-gradient(45deg, #ff4ea0, #0043ff);
        width: 200px;
        height: 200px;
        border-radius: 10px;
        font-weight: 700;
        padding: 1rem;
        box-shadow: 0 2px 30px rgb(0 0 0 / 50%);
        margin-bottom: 4rem;
        transform-style: preserve-3d;
    }
    .child {
        background: linear-gradient(45deg, #4effef, #0014ff);
        width: 200px;
        font-weight: 700;
        height: 200px;
        border-radius: 10px;
        position: relative;
        top: 30px;
        left: 30px;
        padding: 1rem;
        box-shadow: 0 2px 30px rgb(0 0 0 / 50%), 0 0 0 1px rgba(0,0,0,0.05);
        transform: translateZ(-10px)
    }

这导致孩子现在出现在父母后面：

I am the parent

I am the child, but I want to be behind my parent