为什么定位的div重叠？

Question

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

我希望以红色标出的div位于蓝色区域之下，并且无法确定如何执行此操作。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有人可以帮我弄清楚如何正确对齐它们吗？

Answer 1

对于较低的div，您可以尝试添加clear:both;

#lowerDiv {
    position: relative;
    clear:both;
    width: 40%;
    left: 2%;
    border: 1px solid red;
    text-align: center;
}

Answer 2

这是因为你使用高度百分比。你已经采取了上半径的高度是70％。它占据了你主要部门的70％。并且你的低级div拥有的数据多于它在同一个外部div中可以调整的数据。所以你的主要div应该足够大，以便你的lowerDiv可以在提供给它的剩余30％的空间中进行调整。或者你可以调整你的upperDiv的高度百分比值，这样两者都可以在那个空间内调整。

Answer 3

div＃upperDiv的样式有top：5％导致这种情况发生。虽然亲戚但div＃upperDiv正在将5％的顶部重叠在div＃lowerDiv上。 解决方案：使用顶部：从upperDiv取消5％样式或将相同的顶部样式添加到lowerDiv。