絕對位置在div下方的位置div

Question

我的網站上有一個容器，寬度爲1024px。我把我的div放在另一個裏面。但我希望其中一個填充屏幕寬度，所以我不得不使用position: absolute就可以了。問題是，當我將下一個div放在它下面時，它會代替絕對定位的div。例如：

<div style="width: 1024px; margin: 0 auto;"> 
    <div style="position: absolute; height: 500px;"> 
    </div> 
    <div style="height: 100px;"> 
     It's at the top of the upper div. 
    </div> 
</div> 

我怎麼能解決這個問題？

Answer 1

嘗試位置：相對的而不是絕對的，並設置寬度爲100％

Answer 2

缺省情況下，div應「填充屏幕寬度」，因爲它是顯示是塊和默認寬度爲100％（使用缺省時定位一個div [靜態]）。不過，如果你想讓「下」div在「上」div後面開始（並且你希望繼續在上div上使用絕對定位），那麼你也可以使它的位置絕對，並且設置top屬性爲上部div的高度。

<div style="width: 1024px; margin: 0 auto;"> 
    <div style="position: absolute; height: 500px; top:0; left:0;"> 
    </div> 
    <div style="height: 100px; position:absolute; top:500px; left:0;"> 
     It's at the top of the upper div. 
    </div> 
</div> 

Answer 3

你CSS需求是這樣的：

section { 
display: block; 
width: 1024px; 
margin: 0 auto; 
} 

section div:nth-of-type(1) { 
height: 500px; 
} 

section div:nth-of-type(2) { 
height: 100px; 
} 

而且你HTML是這樣的：

<section> 
<div> 
</div> 

<div> 
Now it's where it should be. 
</div> 
</section>