使用float和z-index對齊div div123s

Question

我不敢相信我無法使這個工作！

這基本上是我要去看的樣子，但根本無法像這樣得到它！

+------------------------------------------+ 
| Div 1         | 
|    +-------------+    | 
|    | Div 2  |    | 
+-------------|    |--------------+ 
+-------------|    |--------------+ 
| Div 3  |    | Div 4  | 
|    +-------------+    | 
|    |  +-----------------+ 
|    |+-------------------------+ 
|    || Div 5     | 
|    ||       | 
|    ||       | 
+---------------++-------------------------+ 

我試過把div放在每一個不同的順序中。

我有容器設置爲position: relative

#div1 { 
    width: 950px; 
} 
#div2 { 
    position: absolute; 
    height: 150px; 
    width: 150px; 
    margin: -100px auto 0 auto; 
    left: 0; 
    right: 0; 
    z-index: 88; 
} 
#div3 { 
    float: left; 
    width: 200px; 
    z-index: 0; 
} 
#div4 { 
    width: 400px; 
    text-align: center; 
    float: right; 
    z-index: 0; 
} 
#div5 { 
    width: 600px; 
    float: right; 
    clear: right; 
    z-index: 0; 
} 

我的div 1,2,3和4做工精細整個頁面。但是當我添加div 5時，它將所有的東西都弄亂了。 Div 2似乎是一個問題，第5部分似乎想要與之相符。

如果你可以請求幫助，它會爲我省下額外的一筆錢！

Answer 1

你錯過了兩件事，爲了絕對定位元素position:relative，它們必須包含在一個位置相對包裝中。也似乎因爲元素沒有確定的高度，所以它們會崩潰。

請參閱附帶的小提琴。 http://jsfiddle.net/4TCJ9/

Answer 2

使用下面的代碼：

<div id="wrapper"> 
<div id="div1"></div> 
<div id="div2"></div> 
<div id="align">  
<div id="div3"></div> 
<div id="div4"></div> 
<div id="div5"></div> 
</div> 
</div> 

CSS：

#wrapper { 
position:relative; 
} 

div { 
border:1px solid black; 
background: yellow; 

} 

#div1 { 
width: 950px; 
height:200px; 
} 
#div2 { 
position: absolute; 
height: 150px; 
width: 150px; 
left: 40%; 
top: 100px; 
z-index: 88; 
    } 
#align{ 
width:950px; 
float:left; 
position:relative; 
height:auto; 

} 
#div3 { 
float: left; 
width: 200px; 
z-index: 0; 
height:400px; 
} 
#div4 { 
width: 745px; 
text-align: center; 
float: left; 
z-index: 0; 
height:200px; 
} 
#div5 { 
width: 745px; 
float: left; 
clear: right; 
z-index: 1; 
height:200px; 
} 

變化大小取決於你的需要。