相對於包含div的絕對定位

我想在我的一個更大的居中「全部」div中有幾個絕對定位的div容器，它們必須具有相對定位，以便它可以在瀏覽器中居中，以便我可以完全控制在內部div的同時仍然能夠擁有一個居中的頁面。我試着這樣做：相對於包含div的絕對定位

<body> 
    <div id="all"> 
    <div id="header"></div> 
    <div id="main"></div> 
    <div id="footer"></div> 
    </div> 
</body>

以此爲CSS：

#all 
{ 
    background-color:#ffffff; 
    margin-left:auto; 
    margin-right:auto; 
    width:1000px; 
    height:1300px; 
} 

#header 
{ 
    background-color:#ff0000; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:1000px; 
    height:200px; 
} 

#main 
{ 
    background-color:#00ff00; 
    position:absolute; 
    top:200px; 
    left:0px; 
    width:1000px; 
    height:1000px; 
} 

#footer 
{ 
    background-color:#0000ff; 
    position:absolute; 
    top:1200px; 
    left:0px; 
    width:1000px; 
    height:100px; 
}

但尚的#header，#main與#footer的都是單獨對準到頂部和沒有體現居中，並從那裏完全分離父div #all，因爲#all應該是中心的。有人可以解釋爲什麼會發生這種情況並告訴我一個解決辦法嗎

來源

2012-08-03 semicolon

給#allposition:relative;事情應該按預期工作。

來源

2012-08-03 02:47:07 Jrod

這是因爲絕對值是基於最接近的相對父親。如果沒有父母是「親戚」，那麼絕對值是基於瀏覽器窗口的。 – TLS 2012-08-03 02:49:06

我讚美你好人，現在我覺得很蠢...... – semicolon 2012-08-03 02:54:08

@semicolon你應該感覺很聰明，因爲現在你知道了相對和絕對定位！在完全解釋的問題上做好工作。 – TLS 2012-08-03 02:55:40

相對於包含div的絕對定位

回答

相關問題