絕對定位Div並未顯示出需要的方式

我試圖模仿如此處所示的佈局。 http://themeforest.net/item/real-homes-wordpress-real-estate-theme/full_screen_preview/5373914我已經構建了很多次，因爲我正在學習如何使它響應瀏覽器調整大小。無論如何，我已經把它弄清楚了。我目前的問題是我有一個絕對定位的div嵌套在相對定位的div中。它被定位在右邊：0和底部：0.然而它的顯示在頂部。它應該是一個包裝div，但爲了看到它的工作原理，我把它做成了一個簡單的矩形。這是一個工作示例。 http://jsfiddle.net/3Dat6/絕對定位Div並未顯示出需要的方式

在此先感謝

這是div的問題

<div class="main-menu-and-contact-wrap"></div>

2014-02-13 Greg

要使用絕對定位，你只需要在將包含使用position:absolute兒童元素指定position:relative。

如果你的CSS指定了position:relative那麼沒有理由。

通過指定position:relative，您正在爲絕對定位的子元素定義原點。

所以在你的情況下，你應該只在#headcontainer元素上指定position:relative。

另外，由於您使用的是浮動元素，因此＃headcontainer正在摺疊到零高度（爲其添加邊框，您將看到）。所以一定要清除你的浮動元素。

2014-02-13 18:34:27

把<div class="main-menu-and-contact-wrap"></div>只是貝婁<div id="headerTop">。

使用絕對對象時，div的順序很重要。

2014-02-13 18:34:05

這是不正確的。元素的順序對絕對定位無關緊要。重要的是如何定義相對於父級的CSS定位。 –

不是。元素的順序可以改變/打破/修改樣式。但不是一個規則。 –

回答