Uitdaging: Absolute Positionering Toepassen
Taak
Centreer het kindelement (div
met de classnaam child
) binnen het ouderelement (div
met de classnaam parent
) met behulp van absolute positionering.
Stappen:
- Pas
absolute
positionering toe op het kindelement. - Bereken de waarden voor de eigenschappen
top
enleft
om het kindelement te centreren binnen het ouderelement. Het ouderelement heeft een breedte en hoogte van220px
, terwijl het kindelement een breedte en hoogte van80px
heeft. - Zorg ervoor dat één element
absolute
positionering heeft en het andererelative
positionering om de juiste positioneringscontext te creëren. Anders zal de absolute positionering relatief zijn aan hetbody
-element.
index.html
index.css
- Gebruik de formule
top
om de waarde voor de eigenschap(parentHeight - childHeight) / 2
te berekenen. - Gebruik de formule
left
om de waarde voor de eigenschap(parentWidth - childWidth) / 2
te berekenen.
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 2. Hoofdstuk 5
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
Uitdaging: Absolute Positionering Toepassen
Veeg om het menu te tonen
Taak
Centreer het kindelement (div
met de classnaam child
) binnen het ouderelement (div
met de classnaam parent
) met behulp van absolute positionering.
Stappen:
- Pas
absolute
positionering toe op het kindelement. - Bereken de waarden voor de eigenschappen
top
enleft
om het kindelement te centreren binnen het ouderelement. Het ouderelement heeft een breedte en hoogte van220px
, terwijl het kindelement een breedte en hoogte van80px
heeft. - Zorg ervoor dat één element
absolute
positionering heeft en het andererelative
positionering om de juiste positioneringscontext te creëren. Anders zal de absolute positionering relatief zijn aan hetbody
-element.
index.html
index.css
- Gebruik de formule
top
om de waarde voor de eigenschap(parentHeight - childHeight) / 2
te berekenen. - Gebruik de formule
left
om de waarde voor de eigenschap(parentWidth - childWidth) / 2
te berekenen.
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 2. Hoofdstuk 5