为何z-index未生效？伪元素与原元素出现重叠问题

我来帮你拆解这个问题～首先看你的代码，核心问题出在**堆叠上下文（stacking context）**的创建上：

你的.bz元素设置了position: absolute和z-index: 1，这会让它创建一个独立的堆叠上下文。而:before伪元素作为.bz的子元素，它的z-index是相对于这个父级堆叠上下文来计算的，不是全局的。

现在你的:before设置了z-index: -1，这意味着它会处于.bz这个堆叠上下文的最底层——而.bz本身有不透明的绿色背景（background: #0f0），所以伪元素直接被父元素的背景完全挡住了，看起来就像z-index没生效一样。

解决方法（根据你想要的效果选一个）： #

• 如果你想让伪元素显示在.bz的下方（但不被背景挡住）：
  把.bz的背景改成透明：

  .bz {
    /* 其他样式不变 */
    background: transparent;
  }
  

  这样就能透过父元素看到下方的伪元素了。

• 如果你想让伪元素脱离父级堆叠上下文的限制：
  移除.bz的z-index: 1，这样它就不会创建独立的堆叠上下文了。此时伪元素的z-index会相对于页面的根堆叠上下文（body/html）计算，z-index: -1会让它处于.bz的下方，超出父元素的部分会正常显示在页面背景上。

• 如果你想让伪元素显示在.bz的上方：
  把:before的z-index改成大于父元素的数值，比如z-index: 2，这样它就会覆盖在.bz上面。

另外，你的.bz:after代码没写完，如果之后有相关问题可以补充完整哦～

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