绝对定位div z-index更低却遮挡其他div，JSFiddle无法复现问题求助

嘿，这种本地能复现但在线编辑器（比如JSFiddle）跑不出来的bug真的挺磨人的！我来帮你拆解几个最可能的原因，一步步排查：

1. 先检查最容易忽略的标签闭合问题 #

你写的 <div class="absolute-background" /> 是自闭合格式，但在标准HTML里，<div> 是非自闭合标签，某些浏览器可能会错误解析这个结构，导致 .where-is-this 被意外嵌套到 .absolute-background 内部——那自然会被蓝色背景层完全遮挡。

修正成标准闭合格式试试：

<div class="container">
  <div class="absolute-background"></div>
  <div class="where-is-this"></div>
</div>

2. z-index只对「定位元素」生效 #

z-index 属性仅作用于 position 值为 relative、absolute、fixed 或 sticky 的元素。如果 .where-is-this 是默认的 static 定位，哪怕你给它设置z-index也不会生效，绝对定位的 .absolute-background 会默认覆盖在它上方。

给目标元素加上定位属性就能解决：

.where-is-this {
  position: relative; /* 关键：切换为非static定位 */
  z-index: 1; /* 数值比0高即可 */
}

3. 堆叠上下文的隐性干扰 #

你的 .container 设置了 position: relative + overflow: hidden，这会创建一个新的堆叠上下文。如果 .where-is-this 没有自己的堆叠上下文，它的z-index是相对于父容器的堆叠上下文计算的。但还有一种隐藏坑：如果本地项目中，.container 或它的父元素被其他样式添加了 transform、filter、perspective 这类属性，也会强制创建堆叠上下文，导致z-index的计算逻辑超出预期。

用浏览器开发者工具（F12）查看 .container 的Computed样式，确认有没有这类意外的属性。

4. 本地环境的样式污染 #

JSFiddle是干净的沙箱，但你的本地项目可能有全局样式、第三方CSS库或者其他组件的样式冲突：

• 有没有全局选择器（比如 * { position: absolute; }）篡改了元素默认定位？
• 有没有优先级更高的选择器（比如ID选择器、行内样式）覆盖了 .where-is-this 的z-index或定位属性？

同样用开发者工具的「元素」面板，查看 .where-is-this 的样式规则，看看哪些属性被划掉了，找到冲突的来源。

测试用的完整代码 #

把下面的代码复制到本地试试，应该能正常显示 .where-is-this 在蓝色背景上方：

<div class="container">
  <div class="absolute-background"></div>
  <div class="where-is-this">我终于显示出来了！</div>
</div>

.container {
  background: transparent;
  position: relative;
  overflow: hidden;
  height: 200px; /* 给个具体高度方便测试 */
  width: 200px;
}
.absolute-background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: blue;
  z-index: 0;
}
.where-is-this {
  position: relative;
  z-index: 1;
  color: white;
  padding: 20px;
}

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