Herausforderung: 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:
- Dem Kindelement die Positionierung
absolute
zuweisen. - Die Werte für die Eigenschaften
top
undleft
berechnen, um das Kindelement innerhalb des Elternelements zu zentrieren. Das Elternelement hat eine Breite und Höhe von220px
, während das Kindelement eine Breite und Höhe von80px
besitzt. - Sicherstellen, dass ein Element die Positionierung
absolute
und das andere die Positionierungrelative
erhält, um den korrekten Positionierungskontext herzustellen. Andernfalls bezieht sich die absolute Positionierung auf dasbody
-Element.
index.html
index.css
- Zur Berechnung des Wertes für die Eigenschaft
top
folgende Formel verwenden:(parentHeight - childHeight) / 2
. - Zur Berechnung des Wertes für die Eigenschaft
left
folgende Formel verwenden:(parentWidth - childWidth) / 2
.
index.html
index.css
War alles klar?
Danke für Ihr Feedback!
Abschnitt 2. Kapitel 5
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Herausforderung: 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:
- Dem Kindelement die Positionierung
absolute
zuweisen. - Die Werte für die Eigenschaften
top
undleft
berechnen, um das Kindelement innerhalb des Elternelements zu zentrieren. Das Elternelement hat eine Breite und Höhe von220px
, während das Kindelement eine Breite und Höhe von80px
besitzt. - Sicherstellen, dass ein Element die Positionierung
absolute
und das andere die Positionierungrelative
erhält, um den korrekten Positionierungskontext herzustellen. Andernfalls bezieht sich die absolute Positionierung auf dasbody
-Element.
index.html
index.css
- Zur Berechnung des Wertes für die Eigenschaft
top
folgende Formel verwenden:(parentHeight - childHeight) / 2
. - Zur Berechnung des Wertes für die Eigenschaft
left
folgende Formel verwenden:(parentWidth - childWidth) / 2
.
index.html
index.css
War alles klar?
Danke für Ihr Feedback!
Abschnitt 2. Kapitel 5