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

bookHerausforderung: Absolute Positionierung Umsetzen

Aufgabe

Das Kindelement (div mit dem Klassennamen child) innerhalb des Elternelements (div mit dem Klassennamen parent) mithilfe von absoluter Positionierung zentrieren.

Schritte:

  1. Dem Kindelement die Positionierung absolute zuweisen.
  2. Die Werte für die Eigenschaften top und left berechnen, um das Kindelement innerhalb des Elternelements zu zentrieren. Das Elternelement hat eine Breite und Höhe von 220px, während das Kindelement eine Breite und Höhe von 80px besitzt.
  3. Sicherstellen, dass ein Element die Positionierung absolute und das andere die Positionierung relative erhält, um den korrekten Positionierungskontext herzustellen. Andernfalls bezieht sich die absolute Positionierung auf das body-Element.
index.html

index.html

index.css

index.css

copy
  1. Zur Berechnung des Wertes für die Eigenschaft top folgende Formel verwenden: (parentHeight - childHeight) / 2.
  2. Zur Berechnung des Wertes für die Eigenschaft left folgende Formel verwenden: (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Awesome!

Completion rate improved to 2.04

bookHerausforderung: Absolute Positionierung Umsetzen

Swipe um das Menü anzuzeigen

Aufgabe

Das Kindelement (div mit dem Klassennamen child) innerhalb des Elternelements (div mit dem Klassennamen parent) mithilfe von absoluter Positionierung zentrieren.

Schritte:

  1. Dem Kindelement die Positionierung absolute zuweisen.
  2. Die Werte für die Eigenschaften top und left berechnen, um das Kindelement innerhalb des Elternelements zu zentrieren. Das Elternelement hat eine Breite und Höhe von 220px, während das Kindelement eine Breite und Höhe von 80px besitzt.
  3. Sicherstellen, dass ein Element die Positionierung absolute und das andere die Positionierung relative erhält, um den korrekten Positionierungskontext herzustellen. Andernfalls bezieht sich die absolute Positionierung auf das body-Element.
index.html

index.html

index.css

index.css

copy
  1. Zur Berechnung des Wertes für die Eigenschaft top folgende Formel verwenden: (parentHeight - childHeight) / 2.
  2. Zur Berechnung des Wertes für die Eigenschaft left folgende Formel verwenden: (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 5
some-alt