css - 为什么定位的 div 重叠？

Question

我有一个主包装 div，里面有 2 个内容 div。两个内容 div 的 position 属性都设置为 relative，但由于某种原因它们重叠，如下所示:

我希望红色轮廓的 div 位于蓝色轮廓的下方，但我不知道该怎么做。

#wrap {
  height: 500px;
  width: 350px;
  border: 3px solid black;
}
#upper {
  position: relative;
  width: 40%;
  height: 70%;
  top: 5%;
  left: 2%;
  border: 1px solid blue;
  text-align: center;
}
#lower {
  position: relative;
  width: 40%;
  height: 20%;
  left: 2%;
  border: 1px solid red;
}

<div id="wrap">
  <div id="upper"></div>
  <div id="lower"></div>
</div>

谁能帮我弄清楚如何正确对齐它们？

Answer 1

div#upperDiv 的样式有 top:5% 导致这种情况发生。虽然是相对的，但 div#upperDiv 是将 5% 的顶部重叠在 div#lowerDiv 上。解决方案:要么将 top:5% 的样式从 upperDiv 中去掉，要么将相同的顶部样式添加到 lowerDiv。