html - 如何将一个div放在另一个div下面？

Question

我有一个#slider带有图像的 div。之后，我有一个#content包含文本的 div。我已经尝试过position:relative，所以我认为它应该出现在前一个 div 之后，我的意思是，#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

Answer 1

您已设置#slider为absolute，这意味着它“相对于最近的定位祖先定位”（令人困惑，对吗？）。同时，#contentdiv 是相对放置的，意思是“相对于它的正常位置”。所以 2 个 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/

Answer 2

改变位置怎么样： #content #text div上的相对位置：绝对

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

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

然后您可以使用左侧和顶部的 css 属性在 #content div 中定位