Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Uitdaging: Absolute Positionering Toepassen | CSS-Positionering Beheersen
Geavanceerde CSS-Technieken

bookUitdaging: 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:

  1. Pas absolute positionering toe op het kindelement.
  2. Bereken de waarden voor de eigenschappen top en left om het kindelement te centreren binnen het ouderelement. Het ouderelement heeft een breedte en hoogte van 220px, terwijl het kindelement een breedte en hoogte van 80px heeft.
  3. Zorg ervoor dat één element absolute positionering heeft en het andere relative positionering om de juiste positioneringscontext te creëren. Anders zal de absolute positionering relatief zijn aan het body-element.
index.html

index.html

index.css

index.css

copy
  1. Gebruik de formule top om de waarde voor de eigenschap (parentHeight - childHeight) / 2 te berekenen.
  2. Gebruik de formule left om de waarde voor de eigenschap (parentWidth - childWidth) / 2 te berekenen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 5

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you show me the CSS code to center the child element using absolute positioning?

What should the HTML structure look like for the parent and child divs?

Can you explain why one element needs relative positioning and the other absolute?

Awesome!

Completion rate improved to 2.04

bookUitdaging: 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:

  1. Pas absolute positionering toe op het kindelement.
  2. Bereken de waarden voor de eigenschappen top en left om het kindelement te centreren binnen het ouderelement. Het ouderelement heeft een breedte en hoogte van 220px, terwijl het kindelement een breedte en hoogte van 80px heeft.
  3. Zorg ervoor dat één element absolute positionering heeft en het andere relative positionering om de juiste positioneringscontext te creëren. Anders zal de absolute positionering relatief zijn aan het body-element.
index.html

index.html

index.css

index.css

copy
  1. Gebruik de formule top om de waarde voor de eigenschap (parentHeight - childHeight) / 2 te berekenen.
  2. Gebruik de formule left om de waarde voor de eigenschap (parentWidth - childWidth) / 2 te berekenen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 5
some-alt