CSS水平絕對位置和垂直相對位置

Question

我有一個居中的div。子div（紅色）應該與居中的div重疊。這完全沒有問題。

現在我想要一個重疊div（綠色）後面的div來正確垂直放置（在重疊之後）。那麼是否有可能混合絕對定位和相對定位？

這裏是我的代碼：

HTML：

<div id="container"> 
    blubb 
    <div id="overlap"> 
     Content goes here. 
    </div> 
    <div id="after"> 
     after. 
    </div> 
</div> 

CSS：

#container{ 
    width:100px; 
    height:400px; 
    background:#ccc; 
    margin:0 auto; 
} 

#overlap{ 
    position:absolute; 
    left:0; 
    right:0; 
    height:100px; 
    background:red; 
    color:white; 
} 

#after{ 
    position:relative; 
    height:100px; 
    background:green; 
    color:white; 
} 

這裏也是一個鏈接的jsfiddle：

http://jsfiddle.net/XLfkn/

Answer 1

不，在最新版本的CSS中沒有這樣的東西。絕對定位是全部或沒有。你不能將某些東西放置在水平位置而不是垂直位置。

根據您的需求有幾種選擇。一種方法是簡單地把你的「之後」裏你的「重疊」：

<div id="container"> 
    blubb 
    <div id="overlap"> 
     Content goes here. 
     <div id="after"> 
      after. 
     </div> 
    </div> 
</div> 

如果你需要單獨的邊框和背景顏色，簡單包裝「內容放在這裏」在另一個div這樣的：

<div id="container"> 
    blubb 
    <div id="overlap"> 
     <div id="before"> 
      Content goes here. 
     </div> 
     <div id="after"> 
      after. 
     </div> 
    </div> 
</div> 

您可以絕對位置#overlap和有#before和#after要麼fixed或relative。你需要基本上分割你的#overlap風格，這樣一些人留在#overlap，但像背景的東西被移動到#before。

Answer 2

因爲在你的榜樣overlap有一個固定的高度，你可能會抵消after相同量：

#after{ 
    position:relative; 
    height:100px; 
    background:green; 
    color:white; 
    margin-top:100px; 
} 

如：http://jsfiddle.net/XLfkn/14/

當然，如果overlap都將有一個動態的高度，這將不工作。