Css 为什么定位div重叠？

我有一个主包装器div，里面有两个内容div。两个内容div的

位置

属性都设置为

相对

，但由于某些原因，它们重叠，如下所示：

我希望红色的div在蓝色的下方，我不知道怎么做

#换行{
高度：500px；
宽度：350px；
边框：3倍纯黑；
}
#上层{
位置：相对位置；
宽度：40%；
身高：70%；
最高：5%；
左：2%；
边框：1px纯蓝色；
文本对齐：居中；
}
#降低{
位置：相对位置；
宽度：40%；
身高：20%；
左：2%；
边框：1px纯红；
}

---

对于较低的div，您可以尝试添加

清除：两者

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

发生这种情况是因为你用百分比表示高度。正如你们所说的，upperDiv的高度是70%。它占据了主分区的70%，而下分区的数据量超过了它在同一外部分区中可以调整的数据量。因此，主分区应该足够大，以便下分区可以在提供给它的剩余30%空间中进行调整。或者你可以调整你的upperDiv的高度百分比值，以便两者都可以在该空间中进行调整。
div#upperDiv的样式具有top:5%，这导致了这种情况的发生。虽然相对，但div#upperDiv在div#lowerDiv上占据5%的顶部重叠。
解决方案：要么从upperDiv中去掉top:5%的样式，要么将相同的top样式添加到lowerDiv。
添加一个具有指定问题的JSFIDLE…添加朋友是在哪个div中编写的？？lower！对不起，我在做小提琴。我做了小提琴，谢谢你的耐心。有趣的是，我会尽量让它更有活力。谢谢你的回答！如果你能帮我弄清楚如何让它更有活力，请告诉我。我做了一把小提琴：哇，我不知道
top
会有这样的含义，我觉得比这简单。谢谢你的回答！