強制相對DIV承認他的絕對DIV兒童

我遇到了一個問題，其中我的DIV是position:relative不承認他的position:absolute孩子。因此它會導致下一個position:relative div在錯誤的地方顯示的問題。強制相對DIV承認他的絕對DIV兒童

CSS：

#header{ 
    margin: 0 auto; 
    position:relative; 
    width:740px; 
    outline:2px solid black 
} 

#header #logo{ 
    position:absolute; 
    width:218px; 
    height:69px; 
    background-image:url('../images/Logo.png'); 
    top:15px; 
    left:30px; 
    text-indent: -999px; 
    overflow:hidden !important; 
} 

#header #logo a{ 
    width:218px; 
    height: 69px; 
} 

#header h1{ 
    color:#437297; 
    font-size:26px; 
    font-weight: normal; 
    position:absolute; 
    top:25px; 
    right:15px; 
    letter-spacing: 0.5px; 
} 

/* content */ 

#content{ 
    position: :relative; 
    margin: 0 auto; 
    width:1024px; 
    outline: 1px solid red; 
    min-height:10px; 
}

HTML：

<div id="header"> 
    <div id="logo"><a href="#">some text</a></div> 
    <h1>My Page</h1> 
</div> 

<div id="content"> 

</div>

爲了說明問題： http://jsfiddle.net/qBbYR/

的問題是，黑概述DIV是頭DIV應該是在頁面頂部，RED概述的DIV是CONTENT DIV，它應該在HEADER DIV之後。

正如您所看到的，標題DIV會忽略它的子項，因爲它們位於絕對位置，並且會導致設計問題。

我能做些什麼來解決這個問題？

來源

2013-07-07 kfirba

具有強制性代碼標籤的重點在於，您可以生成一個質量良好的問題，並且沒有像我這樣的用戶下載它。不要在JSFiddle中解釋你的代碼 - 在你的問題中提到它__ – Bojangles

有什麼意義..？ – kfirba

問題是你在你的問題中發佈你的代碼，所以人們可以去解決你的問題，而不是不斷地在你的JSFiddle和你的描述之間在SO – Bojangles

絕對定位使元素超出正常流量。如果你想讓它們影響容器的高度，不要放置它們。

改爲使用填充，邊距，浮動並顯示內嵌塊。

來源

2013-07-07 18:15:39 Quentin

那麼，定位標籤是一種自閉症。如果您需要容器來調整其子尺寸，您有兩種選擇：

顯式設置容器尺寸;或
讓孩子沒有定位（更好的IMO）。

來源

2013-07-07 18:16:10 LexLythius

我明白了，所以只有當維度無關時才使用位置 – kfirba

對於離散組件更合理。在這裏，您可以使用標題定位並讓其子女獨處。但也許它不是一個很好的用例。例如，對話框窗口是一個很好的定位用例。 – LexLythius

強制相對DIV承認他的絕對DIV兒童

回答

相關問題