Html 使用浮点和z索引对齐div

我不敢相信我不能让它工作

这基本上就是我想要的样子，但根本就不能这样

+------------------------------------------+
|   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;
}

我让1、2、3和4号分区很好地工作。但当我加上第5组的时候，一切都搞砸了。Div 2似乎是一个问题，Div 5似乎希望与之保持一致

---

如果你能帮忙的话，我的额头上就不会再有肿块了

您缺少两件事，为了绝对定位元素

position:relative

，它们必须包含在position-relative包装中。而且，由于元素没有定义的高度，它们似乎会崩溃

请看随附的小提琴。 使用以下代码：

<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>

根据需要改变尺寸

#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;
}