Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Absolute Positionierung in CSS | CSS-Positionierung Meistern
Fortgeschrittene CSS-Techniken

bookAbsolute 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.html

index.css

index.css

copy

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, right und bottom fü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.

question mark

Was passiert mit der Position eines Elements, wenn wir position: absolute anwenden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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.04

bookAbsolute 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.html

index.css

index.css

copy

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, right und bottom fü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.

question mark

Was passiert mit der Position eines Elements, wenn wir position: absolute anwenden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4
some-alt