如何将一个div放置在另一个div下方？

Question

我有一个带有图片的

#slider

。在它后面，我有一个包含文本的

#content

。我尝试了position:relative，所以我认为它应该出现在前一个

#slider

之后，但是这里它没有按照预期的方式出现。

问题出在哪里？如何解决？

HTML

<div id="slider">
    <img src="http://oi43.tinypic.com/25k319l.jpg"/>
</div>
<div id="content">
    <div id="text">
        sample text
    </div>
</div>

CSS

#slider {
    position:absolute;
    left:0;
    height:400px;
}
#slider img {
    width:100%;
}

#content {
    position:relative;
}

#content #text {
    position:relative;
    width:950px;
    height:215px;
    color:red;
}

JSFIDDLE

- rram

---

为什么在 #slider 上使用了 position:absolute？这就是导致你的问题的原因。 - Joseph

哦，你是说 #content 只会考虑相对和静态位置？我理解的对吗？ - rram

如果您的#slider设置为position:absolute，则会使其超出文档流..因此任何在该标记下方的内容都将被推上去..因此您需要删除position:absolute，或者在#content中添加一个与#slider相同高度的顶部间距，并添加一些额外像素以留出#slider之间的空间。 - Jonathan Marzullo

Answer 1

您将#slider设定为absolute，这意味着它"相对于最近的已定位祖先元素进行定位"（有点混乱，对吧？）。同时，#content div被设置为relative，这意味着它是"相对于其正常位置"定位的。因此，这两个div的位置没有关系。

您可以在此处了解CSS定位。

如果您将两者都设为relative，则这两个div将依次排列，如下所示：

#slider {
    position:relative;
    left:0;
    height:400px;

    border-style:solid;
    border-width:5px;
}
#slider img {
    width:100%;
}

#content {
    position:relative;
}

#content #text {
    position:relative;
    width:950px;
    height:215px;
    color:red;
}

http://jsfiddle.net/uorgj4e1/

- Alain1405

---

感谢您更改您的 Fiddle。 - rram

jsfiddle 已更新并改进！我不知道我必须点击更新。 - Alain1405

Answer 2

你考虑将 #content #text div 的 position: relative 改为 position: absolute 吗？

#content #text {
   position:absolute;
   width:950px;
   height:215px;
   color:red;
}

http://jsfiddle.net/CaZY7/12/

然后，你可以使用CSS属性left和top来在#content div内部进行定位。

- Jonathan Marzullo

---

不，红色文本应该在图片之后。 - rram

你的意思是在堆叠的图像之上还是在图像之后使其处于下方？ - Jonathan Marzullo