為什么定位的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，您可以嘗試添加clear:both;

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

Answer 2

之所以發生這種情況，是因為您使用百分比形式的身高。 如上所示，upperDiv的高度為70％。 它占用了您的主要分公司的70％。 而您的下層div具有的數據量超出了同一外部div所能調整的數據。 因此您的主div應該足夠大，以便您的LowerDiv可以調整您提供給它的剩余30％的空間。 或者您可以調整您的upperDiv的高度百分比值，以便兩者都可以在該空間中進行調整。

Answer 3

div＃upperDiv的樣式具有top：5％，這會導致這種情況發生。 雖然是相對的，但div＃upperDiv在div＃lowerDiv上占據5％的最高位。 解決方案：要么從upperDiv上刪除top：5％的樣式，要么將相同的top樣式添加到lowerDiv。