Wie man CSS Position Absolute ein für alle Mal versteht

Hören Sie auf, Ihre Elemente auf dem Bildschirm zu verlieren, indem Sie verstehen, wie sich ein Objekt dort befindet, wo es sich befinden soll

Beim Positionieren eines Elements geht es mehr um die Containerposition des Elements als um seine eigene. Um sich positionieren zu können, muss es wissen, zu welchem ​​übergeordneten Div es sich relativieren wird.

Der folgende Code zeigt vier verschachtelte Divs. .box-1zu .box-3werden von zentriert display: flexund margin: autonur. .box-4hat nicht marginfestgelegt, und es befindet sich an seiner Standardposition im Dokumentfluss.

Die positionEigenschaft wird für alle Elemente nicht festgelegt.

body { display: flex;}
.box-1,.box-2,.box-3 { display: flex; margin: auto;}

Um sich positionieren zu können, muss ein Element zwei Dinge wissen:

  • Koordinaten für seine xund yPositionssatz entweder durch top, right, bottom,left
  • zu welchem ​​Elternteil es sich relativ positionieren wird

Beim Anwenden position: absoluteauf .box-4das Element wird aus dem entfernt normal document flow. Da seine Koordinaten nicht festgelegt sind, bleibt es einfach an der Standardposition, die das übergeordnete Div der oberen linken Ecke ist.

Durch Setzen top: 0und muss left: 0das Element dann wissen, welches übergeordnete Element es als Referenzpunkt betrachtet. Um eine Referenz zu sein, muss das Element mit auf dem Bildschirm positioniert werden position: relative. .box-4Dann werden die übergeordneten Divs gefragt, ob sie positioniert sind. Zuerst fragt es .box-3und bekommt No, I am not positioned.als Antwort. Das gleiche gilt für .box-2und dann .box-1, da alle von ihnen haben position: unset.

Da .box-4ein positioniertes Elternteil nicht gefunden werden konnte, positioniert es sich relativ zum body. Dieses Element befindet sich immer auf dem Bildschirm:

Wenn wir uns setzen , wenn wir position: relativedanach fragen: Es wird als Antwort. Und wird dann relativ positioniert zu :.box-1.box-4Are you positioned?Yes I am..box-4.box-1

Das gilt auch für .box-2und .box-3.

Das absolut positionierte Element positioniert sich relativ zum nächstgelegenen positionierten Vorfahren.

Sobald ein positionierter Vorfahr gefunden wird, ist die Position der Elemente darüber nicht mehr relevant. Die Bilder unten zeigen die Anordnung auf Einstellung position: relativezu .box-2 und .box-3jeweils:

Eine Videoerklärung finden Sie auch unter Code Sketch Channel?

Danke fürs Lesen! ✌️

Ursprünglich veröffentlicht unter marina-ferreira.github.io.