Absolute Positionierung in CSS
Die Verwendung von absoluter Positionierung entfernt das Element aus dem normalen Dokumentenfluss, sodass andere benachbarte Elemente die entstandene Lücke ausfüllen können. Die Positionswerte top, left, bottom und right des Elements werden relativ zu seinem nächsten Vorfahr mit nicht-statischer Positionierung berechnet. Gibt es keinen solchen Vorfahren, werden die Werte anhand der Ränder des <body>-Elements bestimmt.
position: absolute;
In der Regel wird absolute Positionierung in Kombination mit relativer Positionierung verwendet, da ein Element relativ zu einem anderen Element im Dokumentenfluss positioniert werden soll.
Betrachten Sie das folgende Beispiel. Die Aufgabe besteht darin, den Stadtnamen (ein <span>-Element mit der Klasse description) in der rechten oberen Ecke der Stadtkarte (ein <div>-Element mit der Klasse card) zu platzieren. Achten Sie auf die Positionseigenschaft der verschiedenen Elemente.
index.html
index.css
In diesem Beispiel werden die .description-Elemente absolut innerhalb der .card-Elemente positioniert, da auf position: relative; die Eigenschaft .card angewendet wurde. Diese Positionierung platziert die Städtenamen in der rechten oberen Ecke jeder Karte.
Das Element kann relativ zu einem anderen Element verschoben werden. Wie funktioniert das? Es muss position: relative; auf das Elternelement angewendet werden, zu dem das absolut zu positionierende Element gehört. 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 ausgehend von den Rändern des relativ positionierten Elements. Dies kann als das Anwenden eines Abstands auf das Kindelement innerhalb des Elternelements betrachtet 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
Can you explain the difference between absolute and relative positioning?
How do I use absolute positioning to place an element in a specific corner?
What happens if I don't set position: relative on the parent element?
Awesome!
Completion rate improved to 2.04Absolute Positionierung in CSS
Swipe um das Menü anzuzeigen
Die Verwendung von absoluter Positionierung entfernt das Element aus dem normalen Dokumentenfluss, sodass andere benachbarte Elemente die entstandene Lücke ausfüllen können. Die Positionswerte top, left, bottom und right des Elements werden relativ zu seinem nächsten Vorfahr mit nicht-statischer Positionierung berechnet. Gibt es keinen solchen Vorfahren, werden die Werte anhand der Ränder des <body>-Elements bestimmt.
position: absolute;
In der Regel wird absolute Positionierung in Kombination mit relativer Positionierung verwendet, da ein Element relativ zu einem anderen Element im Dokumentenfluss positioniert werden soll.
Betrachten Sie das folgende Beispiel. Die Aufgabe besteht darin, den Stadtnamen (ein <span>-Element mit der Klasse description) in der rechten oberen Ecke der Stadtkarte (ein <div>-Element mit der Klasse card) zu platzieren. Achten Sie auf die Positionseigenschaft der verschiedenen Elemente.
index.html
index.css
In diesem Beispiel werden die .description-Elemente absolut innerhalb der .card-Elemente positioniert, da auf position: relative; die Eigenschaft .card angewendet wurde. Diese Positionierung platziert die Städtenamen in der rechten oberen Ecke jeder Karte.
Das Element kann relativ zu einem anderen Element verschoben werden. Wie funktioniert das? Es muss position: relative; auf das Elternelement angewendet werden, zu dem das absolut zu positionierende Element gehört. 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 ausgehend von den Rändern des relativ positionierten Elements. Dies kann als das Anwenden eines Abstands auf das Kindelement innerhalb des Elternelements betrachtet werden.
Danke für Ihr Feedback!
