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.
position: absolute;
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,rightundbottomfü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.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Fragen Sie mich Fragen zu diesem Thema
Zusammenfassen Sie dieses Kapitel
Zeige reale Beispiele
Awesome!
Completion rate improved to 2.04Absolute Positionierung
Swipe um das Menü anzuzeigen
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.
position: absolute;
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,rightundbottomfü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.
Danke für Ihr Feedback!
