Absolute Positionierung

Die Verwendung von absoluter Positionierung entfernt das Element aus dem Standarddokumentfluss, sodass andere benachbarte Elemente die Lücke füllen können. Die top-, left-, bottom- und right-Positionswerte des Elements werden relativ zu seinem nächsten Vorfahren mit nicht-statischer Positionierung berechnet. Wenn es keinen solchen Vorfahren gibt, werden die Werte basierend auf den Rändern des <body>-Elements bestimmt.

Im Allgemeinen sind wir daran interessiert, absolute Positionierung in Kombination mit relativer Positionierung zu verwenden, da wir ein Element relativ zu einem anderen Element im Dokumentfluss positionieren müssen.

Betrachten Sie das folgende Beispiel. Die Aufgabe besteht darin, den Stadtnamen (ein <span>-Element mit der Klasse description) in die obere rechte Ecke der Stadtkarten (ein <div>-Element mit der Klasse card) zu setzen. Achten Sie auf die Positionseigenschaft der verschiedenen Elemente.

index.html

index.css

In diesem Beispiel sind die .description-Elemente dank der .card, die auf die position: relative; angewendet wird, absolut innerhalb der .card-Elemente positioniert. Diese Positionierung platziert die Stadtnamen in der oberen rechten Ecke jeder Karte.

Wir können das Element relativ zu einem anderen Element verschieben. Wie funktioniert das? Wir müssen position: relative; auf das Element anwenden, das der Vorfahre des Elements ist, das wir absolut positionieren möchten. Andernfalls wird das Element relativ zum <body>-Element positioniert.

Hinweis

Wenn die Eigenschaften top, left, right und bottom für das absolut positionierte Element angegeben werden, berechnet der Browser diese beginnend mit den Rändern des relativ positionierten Elements. Dies kann als Anwenden eines Randes auf das Kindelement innerhalb des Elternelements angesehen werden.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4