如何解决CSS中::after伪元素无法置于父div下方的z-index问题

问题原因 #

你给.spaceCreator同时设置了position: relative和z-index: 0，这会让该元素创建一个独立的堆叠上下文。伪元素::after作为它的子元素，所有z-index值都只会在这个堆叠上下文内部生效——哪怕设为-1，也只能在父元素的内容下方，而父元素的背景会直接覆盖它，看起来就像z-index没生效。

解决方案 #

方案1：移除父元素的z-index（最简单） #

直接删掉.spaceCreator中的z-index: 0，这样父元素不会创建独立堆叠上下文，伪元素的z-index: -1就能正常跑到父元素下方：

.spaceCreator{
    width: 100%;
    height: 300px;
    border-radius: 16px;
    background-color: var(--hoverColorOpacity);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(100px);
    /* 移除z-index: 0 */
}
.spaceCreator::after{
    content: '';
    position: absolute;
    top: 25%;
    right: 25%;
    width: 50%;
    height: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blue)) ;
    border-radius: 16px;
    z-index: -1 ; 
}

方案2：保留父元素z-index时的替代方案 #

如果因为其他需求必须保留.spaceCreator的z-index: 0，可以把渐变背景伪元素转移到父容器.spacesSpaceContainer上，通过定位对准.spaceCreator的位置：

.spacesSpaceContainer{
    width: 100%;
    height: fit-content;
    display: grid;
    padding: 20px var(--paddingside);
    gap: 30px;
    position: relative; /* 添加相对定位 */
}

.spaceCreator{
    width: 100%;
    height: 300px;
    border-radius: 16px;
    background-color: var(--hoverColorOpacity);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(100px);
    z-index: 0; /* 保留z-index */
}
/* 把伪元素转移到父容器 */
.spacesSpaceContainer::after{
    content: '';
    position: absolute;
    top: calc(20px + 25%); /* 对应容器padding+元素内top百分比 */
    right: calc(var(--paddingside) + 25%);
    width: 50%;
    height: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blue)) ;
    border-radius: 16px;
    z-index: -1 ; 
}

原理补充 #

当元素设置了非static的position且带有z-index（哪怕是0）时，会触发创建独立堆叠上下文，子元素的z-index只能在这个上下文内部排序，无法突破到父元素的层级之外。移除父元素的z-index后，父元素不再创建独立堆叠上下文，伪元素的z-index会相对于父元素的父容器生效，就能正常显示在父元素下方。

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