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似乎是一个问题，Div 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;
}

根据您的需要更改尺寸。

使用float和z-index对齐div

2 个答案: