Div未堆叠反而重叠问题求助：相对/绝对定位及z-index均无效

嘿，我明白你现在的困扰——明明用了相对定位容器+绝对定位子元素，还加了z-index，结果Response 2还是把Response 1给完全盖住了。我来帮你拆解下问题，再给你几个靠谱的修复方案：

问题根源在哪？ #

绝对定位的元素本身就是脱离文档流的，只要你没给它们指定不同的top/left这类位置属性，它们都会默认挤在相对容器的左上角位置。哪怕加了z-index，如果顺序搞反了，或者容器本身高度没设置对，还是会出现完全覆盖的情况。

常见的几个坑：

• 没给每个绝对定位的Div设置专属的位置（比如top/left值都一样）
• z-index的优先级搞反了（比如Response 2的z-index比Response 1高）
• 相对定位的容器没设置高度，导致容器塌陷，子元素的位置计算彻底乱套

修复方案（附代码示例） #

假设你的HTML结构大概是这样的：

<div class="container">
  <div class="response response-1">Response 1</div>
  <div class="response response-2">Response 2</div>
</div>

方案1：上下堆叠（完全不重叠） #

如果你的需求是让两个Div上下排列不重叠，其实没必要用绝对定位，但如果一定要用，就得手动给每个Div指定位置：

/* 父容器必须是相对定位，同时设置足够容纳子元素的高度 */
.container {
  position: relative;
  height: 400px;
  padding: 10px;
}

.response-1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 180px;
  background: #ffffff;
  z-index: 2; /* 数值大的会在上方 */
  border-radius: 4px;
}

.response-2 {
  position: absolute;
  top: 200px; /* 让它在Response 1下方，留出空隙 */
  left: 10px;
  width: 100%;
  height: 180px;
  background: #f5f5f5;
  z-index: 1;
  border-radius: 4px;
}

方案2：卡片层叠（部分重叠） #

如果是想做类似卡片堆叠的效果（比如Response 2在Response 1后面露出一部分），可以这么设置：

.container {
  position: relative;
  height: 220px;
  padding: 10px;
}

.response-1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 85%;
  height: 200px;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  border-radius: 4px;
}

.response-2 {
  position: absolute;
  top: 30px; /* 向下偏移一点 */
  left: 30px; /* 向右偏移一点 */
  width: 85%;
  height: 200px;
  background: #f5f5f5;
  z-index: 1;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  border-radius: 4px;
}

重要提醒 #

• 绝对定位元素不占文档流空间，所以父容器必须设置明确高度，否则容器高度为0，子元素位置会乱
• z-index只对非static定位的元素生效，数值越大，元素层级越高
• 如果HTML里Response 2写在Response 1后面，哪怕z-index相同，后面的元素也会默认覆盖前面的，这是浏览器的渲染顺序决定的

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