Wie platziere ich ein Div unter einem anderen Div?

Ich habe ein #slider div mit einem Bild. Danach habe ich eine #content div mit Text. Ich habe versucht position:relative also denke ich, dass es nach dem vorherigen div kommen sollte, meine ich #slider aber hier kommt es nicht so.

Was ist hier das Problem? Wie kann man es überwinden?

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

Sie haben eingestellt #slider wie absolute, was bedeutet, dass es “relativ zum nächsten positionierten Vorfahren positioniert ist” (verwirrend, oder?). In der Zwischenzeit, #content div wird relativ platziert, was “relativ zu seiner normalen Position” bedeutet. Die Position der 2 Divs steht also in keinem Zusammenhang.

Sie können über die CSS-Positionierung lesen hier

Wenn du beides einstellst relativewerden die Divs nacheinander angezeigt, wie hier gezeigt:

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

was ist mit dem ändern Position: relativ auf Ihrem #Inhalt #Text div zu Position: absolut

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

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

Dann können Sie die CSS-Eigenschaften verwenden links und oben um innerhalb des #content div zu positionieren