slide-right-opacity动画运行时伪元素遮挡.block的问题求助

问题原因 #

当.block元素应用transform动画时，会创建一个新的堆叠上下文，此时元素的z-index规则会在这个新上下文内重新生效。原本设置伪元素z-index: -1是相对于父元素的原始上下文，但动画期间主元素的新堆叠上下文打破了这个层级关系，导致伪元素意外覆盖主元素。而动画结束后transform恢复为none，堆叠上下文消失，层级关系回到正常状态。

解决方案 #

最简单的修复方式是给.block添加isolation: isolate属性，强制主元素的堆叠上下文将自身内容与伪元素隔离开，确保背景始终在伪元素上方：

.block {
    position: relative;
    margin: 300px auto 0;
    width: 500px;
    height: 250px;
    background: linear-gradient(0deg, pink, #272727);
    animation-name: slide-right-opacity;
    animation-duration: .5s;
    animation-delay: 0.1s;
    animation-fill-mode: none;
    z-index: 1;
    isolation: isolate; /* 新增这一行 */
}

其他可选方案 #

如果不想使用isolation，也可以通过调整元素结构或伪元素层级来解决：

• 将主元素的背景移到一个独立的伪元素中，设置更高的z-index，让它覆盖发光伪元素
• 给.block的父容器（比如外层<div>）设置position: relative和z-index，统一堆叠上下文

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