Die Anordnung und Positionierung von zwei divs untereinander, CSS

Ich bin neu in CSS, so dass diese Frage möglicherweise tot einfach. Ich bin legen Sie sich eine website und komme nicht weiter mit der Positionierung.

Auf der Website, ich habe einen mittleren Abschnitt, in dem es einen header mit einigen scrollbare Inhalt unter. Hier der relevante CSS für das header-div:

#header {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

Nun, ich will einfach den content div zu sofort unter Folgen, und kann nicht herausfinden, wie das zu tun.

position: relative; 
top: 0;

scheint nicht zu funktionieren (was ich zunächst erwartet). Beide divs sind auf der gleichen logischen Ebene und verpackt in den mittleren Abschnitt div. Ich bin wahrscheinlich etwas fehlt extrem offensichtlich und einfach.

Poste deinen html-code!
Gibt es einen Grund, dass Ihr #header ist absolut positioniert? Entfernen Sie den Stil, und ich glaube, Sie finden die <div>s-Stapel, wie Sie erwartet haben.
Siehe stackoverflow.com/questions/186044/... Tipps für die Positionierung Stil zu verwenden.
Danke F4r-20, das funktionierte perfekt. Danke an alle für die Tipps. Vor allem, denke ich, dass ich brauchte, um zu verstehen, das entscheidende Prinzip über die relative Positionierung.

InformationsquelleAutor principal | 2013-03-19

  1. 4

    Wenn Sie so etwas wie

    <header>header</header>
<main>main content</main>

    Verwenden Sie dieses css:

    header, main
{
    display: block; /* because <main/> is very new */
    padding: 20px;
    background: #eeeeee;
}

header
{
    background: blue;
}

    Das ist alles, weil block-Elemente gehen unter einander per default.

    http://jsfiddle.net/86wX4/

    InformationsquelleAutor Linus Caldwell

  2. 1

    Gibt es einen Grund, dass Ihr #header ist absolut positioniert? Entfernen Sie den Stil, und ich glaube, Sie finden die <div>s-Stapel, wie Sie erwartet haben.

    Geben die <div> eine absolute Positionierung nimmt Sie es aus der Strömung von der Seite, also Elemente, die sich noch in der Strömung, 'glaube nicht' es ist da, damit Sie nicht stapeln auf der jeweils anderen.

    Sagen, das ist Ihre Auszeichnung:

    <div id="header">Header</div>
<div id="content">Content</div>

    Wenn Sie gehen, um absolut positionieren Sie diese Elemente, Sie werden wollen, ordnen Sie Sie mit left, top, right - und/oder bottom Stile. I. E:

    #header{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50px;
}
#content{
    position:absolute;
    width:100%;
    top:50px; //Because the header is 50px high
}

    ABER

    Positionierung alle diese relativ (oder verlassen Sie den standardmäßigen, statischen) würde Sie stapeln wie Sie wollen, Sie trotzdem und Sie würde sogar Strecken die Breite der Seite für Sie.

    Hoffe, das hilft.

    InformationsquelleAutor George

  3. 0

    gibt es aus irgendeinem Grund zu verwenden Sie Ihre header-div mit absoluter position? Sie können die relative position für die beiden div ' s zu vereinbaren unter einander.

    InformationsquelleAutor Ashwani Sharma

Schreibe einen Kommentar