Question

我正在尝试创建类似以下的内容

 -------------------------
|            div 1        |
|_________________________|
| div2 on top of div1/div3|
|-------------------------|
|        div2             |
|_________________________|
|                         |
|        div3             |
|                         |

我想在div2和div1之上创建div3。

我真的没有线索如何做到这一点。有人可以帮我吗？感谢。

Answer 1

您需要使用绝对CSS定位。例如：

<div id="container">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>

#container {
  position: relative;
}
#div2 {
  position: absolute;
}

这是一个jsfiddle示例：http://jsfiddle.net/M7J3G/1

Answer 2

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

只需更改为

<div id="2"></div>
<div id="1"></div>
<div id="3"></div>

或为div 1和3创建一个Wrap元素

<div id="wrapper">
    <div id="1></div>
    <div id="2></div>
    <div id="3></div>
</div>

和css：

#wrapper {
position: relative;
}
#2 {
position: absolut;
bottom: 100%;
}

Answer 3

这里有另一种可能的解决方案，你可以在div3中嵌套div2然后相对于它添加位置并为其添加负顶部。像这样：

HTML

<div class="div1"></div>
<div class="div3">
    <div class="div2"></div>
</div>

CSS

.div2 {
    position: relative;
    top: -50px;
}

这里是一个小提琴我向div2添加了一些透明度（通过不透明度属性），因此你可以告诉它高于div 1和3. http://jsfiddle.net/hN5gq/

很多这些答案似乎都使用了css定位。这是正确的方法。这里有一篇关于定位它的好文章，这是一个有用的东西，可以理解浮动，这样你几乎可以执行任何布局。 http://alistapart.com/article/css-positioning-101/

在div之上创建一个浮动div

3 个答案: