Absolute Positionierung relative Positionierung innerhalb?

Laut W3Schools (http://www.w3schools.com/css/css_positioning.asp):

Relativ positionierte Elemente werden oft als container für Blöcke
absolut positionierte Elemente.

Warum ist das so? Gibt es ein gutes Beispiel?

InformationsquelleAutor More Than Five | 2013-08-16
  1. 19

    Ein gutes Beispiel wäre, wenn Sie verschieben möchten, etwas auf die Seite oder "relative", um einen container/div.

    Hier ist meine Geige http://jsfiddle.net/doitlikejustin/RdWQ7/2/

    Dies zeigt, dass ohne die absolute div innerhalb einer "relativ" div, die Inhalte sind ausgerichtet, um das Dokument Körper.

    Beachten Sie, dass die grün-div (#box1), die position: relative die div in (#inner1) es ausgerichtet ist oben/rechts INNERHALB der #box1.

    Den blauen Kasten (#box2), die genau die gleiche HTML-Struktur wie der green-box (#box1), NICHT enthalten position: relative und beachten Sie, dass das div in es (#inner2) ausgerichtet ist, um die oben/rechts von der body

    #box1, #box2 {
    width: 100px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
}
#box1 {
    background: green;
    position: relative;
}
#box2 {
    background: blue;
}

#inner1, #inner2 {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    position: absolute;
    background: black;
    opacity: 0.5;
    color: white;
    text-align: center;
    line-height: 50px;
}

    Hier ist ein guter Artikel von Chris Coyier...

    Einem Seite-element mit relativer Positionierung gibt Ihnen die Kontrolle zu
    absolut positionieren untergeordneter Elemente innerhalb der it.

    Quelle: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    • Danke. Aber es hat nicht ganz die Antwort auf die Frage. Die inneren divs sind relativ positioniert, um der ersten übergeordneten div, der nicht mit der Standard-Positionierung von statischen. Also, wenn wir machen box2 haben die Positionierung von absolute erhalten wir das gleiche Ergebnis wie die relativ. Dies wirft die Frage auf, was ist so besonders als parent-div als relativ? Dank
    • Sie könnte das tun, aber jetzt ist Ihre #box2 div wird bewegen Sie sich innerhalb des Körpers, als ob es jetzt #inner2. Hier ist ein Beispiel jsfiddle.net/doitlikejustin/RdWQ7/3, fügte ich right so können Sie sehen, wie Sie anders sind.
    • Ich sehe, was du meinst.
    InformationsquelleAutor doitlikejustin
  2. 9

    Was die anderen Antworten nicht ausdrücklich, ist dies:

    Absolute Positionierung gemessen wird in den nächsten Vorfahren, der nicht die statische Positionierung. Geben ein Vorfahre relative Positionierung ist nur ein Mittel zu diesem Zweck. Es muss nicht relativ sein, nur es kann nicht statisch sein.

    Ein element mit absoluter position und

    top:10px;

    werden 10 Pixel von der Spitze des nächsten Vorfahren, dessen position ist nicht statisch.

    InformationsquelleAutor John Robertson
  3. 1

    Wenn ein absolut positioniertes element ist nicht in einem relativen element dann, wenn Sie Satz oben, Links, rechts, oder bot mit einem Wert, es wird die absolute position element aus dem Körper durch diesen Wert.
    Was bedeutet das? Zum Beispiel, wenn Sie eine absoluten position-element-Attribut, Spitze, 10px, wird es schieben Sie das element um 10 Pixel vom oberen Rand des Bildschirms.

    Wenn eine absolute position element ist in einem relativen element dann, wenn Sie Satz oben, Links, rechts, oder bot mit einem Wert, es wird die absolute position element aus, das relativ-element durch den Wert.
    Was bedeutet das? Zum Beispiel, wenn Sie eine absoluten position-element-Attribut, Spitze, 10px, wird es schieben Sie das element um 10 Pixel von oben der relativen element. Dort können Sie verschieben die relativen element-und der absolut positionierte Elemente innerhalb es werden immer 10 Pixel vom oberen Rand der relativen element.

    InformationsquelleAutor A.sharif
Schreibe einen Kommentar