爲什麼定位divs重疊？

我有一個包含2個內容div的主包裝div。這兩個內容的div的position屬性設置爲relative，但出於某種原因，他們正在重疊如下所示：爲什麼定位divs重疊？

我要用紅筆畫出格是藍色的下方時遇到了問題搞清楚如何做到這一點。

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

是否有人可以幫助我弄清楚如何正確地調整呢？

來源

2016-07-18 MarksCode

添加指定問題的jsfiddle ... – vivek

添加朋友寫入哪個div？ –

更低！對不起，我正在做一個小提琴。 – MarksCode

div＃upperDiv的樣式有頂部：5％，導致這種情況發生。雖然相對但div＃upperDiv採取5％頂部重疊div＃lowerDiv。解決方案：無論從topDiv中選擇頂部：5％樣式，還是將相同頂部樣式添加到lowerDiv。

來源

2016-07-18 05:15:45

哇，我不知道'top'可能有這樣的含義，我認爲它比這更簡單。感謝你的回答！ – MarksCode

歡迎@MarksCode。希望它適合你！ –

對於較低的DIV，你可以嘗試添加clear:both;

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

來源

2016-07-18 04:43:46

它發生，因爲üR IN百分比使用高度。正如你已經採取upperDiv的身高是70％。它佔了我們主要股票的70％。和你的下面的div有更多的數據比它可以在相同的外部股利調整。所以你的主要div應該足夠大，這樣你的lowerDiv可以調整剩餘30％的空間並提供給它。或者你可以調整你的upperDiv的高度百分比值，這樣兩者都可以在那個空間中進行調整。

來源

2016-07-18 04:57:36

有趣的是，我會盡量讓它更具活力。感謝你的回答！ – MarksCode

您隨時歡迎您.. –

如果您能幫助我弄清楚如何使它更具活力，請告訴我。我做了一個小提琴：https：//jsfiddle.net/kfupd6hb/ – MarksCode

爲什麼定位divs重疊？

回答

相關問題