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

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

我怎麼能解決這個問題？

來源

2015-11-05 user99999

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

來源

2015-11-05 19:08:49 smallElephant

缺省情況下，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>

來源

2015-11-05 19:08:56

什麼高度是動態的？ – user99999

然後不要使用絕對定位。通過使用靜態或相對定位，其他div將自己的位置立即低於前面的div –

那麼如何在1024像素容器內創建100％屏幕div，而無需絕對定位？ – user99999

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

來源

2015-11-05 20:12:59 Rounin

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

回答

相關問題