Wie positioniere ich absolut in einem div?

Ich habe ein seltsames problem, das die Positionierung einer Reihe von divs ein weiteres div. Ich denke, es wird am besten sein, beschreiben Sie es mit einem Bild:

Wie positioniere ich absolut in einem div?

Innerhalb der schwarzen (#box) div gibt es zwei divs (.ein, .b), die an der gleichen Stelle positioniert. Was ich versuche zu erreichen, ist abgebildet im ersten Bild, das zweite ist der Effekt, den ich erhalten. Wie es aussieht, wenn die divs wurden schwebte, ohne Verrechnung oder etwas, was offensichtlich nicht der Fall. Irgendwelche Ideen wäre willkommen!

Hier ist der code für dieses Beispiel:

CSS:

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML:

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>

InformationsquelleAutor der Frage Justine | 2009-07-16

  1. 25

    Die absoluten divs sind aus dem Fluss des Dokuments, so enthält der div hat keine Inhalte, außer für die Polsterung. Gib #box eine Höhe ausgefüllt.

    #box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}

    InformationsquelleAutor der Antwort Emily

  2. 30
    1. Ersten allen block-level-Elemente sind postioned statisch auf die "Dokument". Die Standardposition für alle Elemente ist position: staticwas bedeutet, dass das element nicht positioniert und tritt, wo es normalerweise tun würde in das Dokument. Normalerweise würden Sie nicht, diese anzugeben, es sei denn, Sie überschreiben musste eine Positionierung, die zuvor gesetzt werden.
    2. Relative position: Wenn Sie angeben position: relativedann können Sie oben oder unten und Links oder rechts zum bewegen des Elements relativ zu denen es normalerweise im Dokument vorkommen.
    3. Wenn Sie angeben position: absolutedas element wird aus dem Dokument entfernt und platziert genau dort, wo Sie sagen, es zu gehen.

    So, in Bezug auf Ihre Frage, die Sie sollten die position des enthaltenden Blocks relativ, ich.e:

    #parent {
  position: relative;
}

    - Und das child-element sollten Sie position absolute, um das übergeordnete element wie diesem:

    #child {
  position: absolute;
}

    Finden Sie unter: Lernen Sie die CSS-Positionierung in Zehn Schritten

    InformationsquelleAutor der Antwort Jimmy Obonyo Abor

  3. 6

    Das problem beschrieben ist (unter anderem) in dieser Artikel.

    #box ist relativ positioniert, wodurch es Teil der "flow" der Seite. Ihre andere divs sind absolut positioniert werden, so dass Sie von der Seite entfernt "flow".

    Seite, die Strömung bedeutet, dass die Positionierung eines Elements Auswirkungen anderer Elemente in den Fluss.

    In anderen Worten, wie #box jetzt sieht der dom .einem und .b sind nicht mehr "im inneren" #box.

    Um dies zu beheben, würden Sie wollen, um alles relativ, oder alles absolute.

    Eine Möglichkeit wäre:

    .a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}

    InformationsquelleAutor der Antwort Tim Hoolihan

  4. 6

    Einer #a oder #b muss nicht position:absoluteso dass #box wachsen zu beherbergen.

    Damit Sie aufhören können #a von position:absoluteund immer noch position #b über der Spitze der es, wie dieser:

    <style>
#box {
    background-color: #000;
    position: relative;     
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 100px; /* So you can see the other one */
    position: absolute;
    top: 10px; left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}
</style>
<div id="box">
    <div class="a">Lorem</div>
    <div class="b">Lorem</div>
</div>
<div id="after">Hello world</div>

    (Beachten Sie, dass ich die verschiedenen breiten, so können Sie sehen, einer hinter dem anderen.)

    Bearbeiten nach Justine ' s Kommentar: Dann ist nur die option geben Sie die Höhe von #box. Diese:

    #box {
    /* ... */
    height: 30px;
}

    funktioniert einwandfrei, vorausgesetzt, die Höhen von a und b fixiert sind. Beachten Sie, dass Sie benötigen, um den IE in den standards-Modus, indem ein doctype am Anfang deiner HTML -

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

    bevor das funktioniert einwandfrei.

    InformationsquelleAutor der Antwort RichieHindle

Schreibe einen Kommentar