Z-index无法隐藏锚点包裹的Logo，加载动画遮挡失效求助

核心原因 #

问题出在堆叠上下文的层级冲突：当Logo被<a>标签包裹时，你给<img>设置的position:absolute+z-index:1会触发<a>形成独立的局部堆叠上下文，导致loader的高z-index（999999）无法穿透这个局部上下文。另外你用的display: run-in是个兼容性极差的属性，也可能干扰正常渲染逻辑。

直接解决方案 #

方案1：修正的堆叠层级 #

给包裹Logo的<a>标签加一行CSS，把它的堆叠上下文层级压到loader之下：

.white-logo > a {
  position: relative;
  z-index: 0;
}

这样<img>的z-index只会在<a>的上下文内生效，而loader属于根堆叠上下文（fixed元素直接挂载在页面根节点），高z-index会直接覆盖。

方案2：简化Logo的CSS设置 #

把<img>的怪异display: run-in换成常规的block，同时移除不必要的z-index，让它回到默认堆叠层级：

.white-logo > a > img {
  display: block;
  width: 5%;
  margin-left: 10%;
  margin-top: -8.5%;
  position: absolute;
  /* 删掉z-index:1 */
}

这种方式更简洁，从根源避免堆叠上下文冲突。

方案3：兜底强化loader #

如果上面的方法都无效，给loader_bg补全属性，强制它覆盖整个视口：

.loader_bg{
  position: fixed;
  z-index: 999999;
  background: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

为什么会这样？ #

z-index不是全局数值比拼，而是同堆叠上下文内的层级对比。当元素设置了非static的position且z-index不为auto时，会创建自己的堆叠上下文，内部元素的z-index只在这个小范围内生效。你的loader是fixed定位，属于页面的根堆叠上下文，只要其他元素的堆叠上下文层级不超过它，就能被正常遮挡。

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