使用translate()居中元素后z-index失效的解决方案咨询

问题场景 #

HTML主体包含<div>translate() issue</div>元素，通过CSS伪元素实现了带双层旋转背景的卡片效果。当改用position:absolute结合transform: translate(-50%, -50%)实现元素居中后，伪元素的z-index属性不再生效，旋转背景被父元素的白色背景遮挡。

原实现代码 #

div {
        width: 300px;
        height: 200px;
        background-color: #eeeeee;

        display: flex;
        justify-content: center;
        align-items: center;
        color: #03a9f4;

        margin: 40px auto;
        position: relative;
}

div::before {
        content: "";
        background-color: #03a9f4;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(-5deg);
        z-index: -1;
}

div::after {
        content: "";
        background-color: #e91e63;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(5deg);
        z-index: -2;
}

导致失效的居中修改代码 #

div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

解决方案及原理 #

问题根源：当给元素添加transform属性时，会自动创建一个新的堆叠上下文。此时伪元素的z-index仅相对于这个新上下文生效，父元素的背景会直接覆盖伪元素，导致原本的负z-index无法将伪元素置于父元素下方。

方案1：给父元素添加z-index: 0

通过给绝对定位的父元素设置z-index: 0，明确其堆叠层级，伪元素的负z-index就能正确相对于父元素的堆叠上下文排列，显示在父元素下方。

修改后的完整代码：

div {
        width: 300px;
        height: 200px;
        background-color: #eeeeee;

        display: flex;
        justify-content: center;
        align-items: center;
        color: #03a9f4;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0; /* 添加该行代码 */
}

div::before {
        content: "";
        background-color: #03a9f4;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(-5deg);
        z-index: -1;
}

div::after {
        content: "";
        background-color: #e91e63;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(5deg);
        z-index: -2;
}

方案2：更换居中方式，避免给父元素添加transform

在父容器（如body）上使用Flex布局实现居中，父元素保持position: relative，避免触发新的堆叠上下文。

修改后的完整代码：

body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
}

div {
        width: 300px;
        height: 200px;
        background-color: #eeeeee;

        display: flex;
        justify-content: center;
        align-items: center;
        color: #03a9f4;

        position: relative;
        margin: 40px; /* 保留原有的间距，可选 */
}

div::before {
        content: "";
        background-color: #03a9f4;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(-5deg);
        z-index: -1;
}

div::after {
        content: "";
        background-color: #e91e63;
        height: 100%;
        width: 100%;
        position: absolute;
        transform: rotate(5deg);
        z-index: -2;
}

内容的提问来源于stack exchange，提问作者AyoubFG