Laut W3Schools ( Ссылка ):
Relativ positionierte Elemente werden oft als Containerblöcke für absolut positionierte Elemente.
Warum ist das? Gibt es ein gutes Beispiel?
Ein gutes Beispiel wäre, wenn Sie etwas auf der Seite oder "relativ" zu einem Container / div positionieren möchten.
Hier ist mein Geigen Ссылка
Dies zeigt Ihnen, dass, ohne dass das absolute div in einem "relativen" div ist, der Inhalt auf den Dokumentkörper ausgerichtet ist.
Beachten Sie, dass das grüne div ( #box1 ), das position: relative hat, das div inside ( #inner1 ) oben / rechts INSIDE von #box1 ausgerichtet ist.
Das blaue Feld ( #box2 ), das genau das selbe HTML-Layout wie das grüne Feld ( #box1 ) hat, enthält nicht position: relative und beachtet, dass das div darin ( #inner2 ) ausgerichtet ist Oben / rechts von body
Hier ist ein guter Artikel von Chris Coyier ...
Ein Seitenelement mit relativer Positionierung gibt Ihnen die Kontrolle positioniere unbedingt Kinderelemente darin.
Quelle: Ссылка
Was die anderen Antworten nicht explizit angeben, ist dies:
Die absolute Positionierung wird im nächsten Vorfahren ohne statische Positionierung gemessen. Eine relative Position der Vorfahren zu geben, ist nur ein Mittel zu diesem Zweck. Es muss nicht relativ sein, es kann einfach nicht statisch sein.
Ein Element mit absoluter Position und
oben: 10px;
ist 10 Pixel vom Anfang des nächsten Vorfahren entfernt, dessen Position nicht statisch ist.
Wenn sich ein absolut positioniertes Element nicht in einem relativen Element befindet, wenn Sie top, left, right oder bot mit einem Wert festlegen, verschiebt es das absolute Positionselement um diesen Wert vom Körper. Was bedeutet das? Wenn Sie beispielsweise das Attribut eines absoluten Positionselements, top, auf 10px setzen, wird das Element 10 Pixel vom oberen Bildschirmrand entfernt.
Wenn sich ein absolutes Positionselement in einem relativen Element befindet, wenn Sie top, left, right oder bot mit einem Wert festlegen, wird das absolute Positionselement von diesem relativen Element um diesen Wert verschoben. Was bedeutet das? Wenn Sie beispielsweise das Attribut eines absoluten Positionselements, top, auf 10px setzen, wird das Element 10 Pixel vom oberen Rand des relativen Elements entfernt. Dort können Sie das relative Element umher bewegen und das absolut positionierte Element wird immer 10 Pixel vom oberen Rand des relativen Elements entfernt sein.
Tags und Links css