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

bookUitdaging: Toepassen van Relatieve Positionering

Opmerking

Elke uitdaging in deze cursus bevat een codevoorbeeld bestaande uit de bestanden index.html en index.css. Aangezien de cursus zich richt op het leren van CSS, wordt aanbevolen de uitdagingen op te lossen in het bestand index.css. Nadat een uitdaging is voltooid, klik op de knop "Run Code" om de live pagina te bekijken en te controleren of de uitdaging correct is opgelost.

Daarnaast biedt elke uitdaging knoppen voor "Hint" en "Solution". Door op de knop "Hint" te klikken, worden hints getoond die relevant zijn voor de huidige taak, terwijl de knop "Solution" het codevoorbeeld met de juiste toepassing van CSS laat zien.

Taak

  1. Voeg relative positionering toe aan het tweede element met de classnaam item.
  2. Verplaats het item 30px naar beneden en 50px naar links.
index.html

index.html

index.css

index.css

copy
  1. Omlaag verplaatsen door een positieve waarde voor de top-eigenschap in te stellen.
  2. Naar links verplaatsen door een negatieve waarde voor de left-eigenschap in te stellen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 3

Vraag AI

expand

Vraag AI

ChatGPT

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

Suggested prompts:

How do I select the second element with the `item` class in CSS?

Can you explain how `position: relative` works in this context?

What values should I use for the `top` and `left` properties to achieve the required movement?

Awesome!

Completion rate improved to 2.04

bookUitdaging: Toepassen van Relatieve Positionering

Veeg om het menu te tonen

Opmerking

Elke uitdaging in deze cursus bevat een codevoorbeeld bestaande uit de bestanden index.html en index.css. Aangezien de cursus zich richt op het leren van CSS, wordt aanbevolen de uitdagingen op te lossen in het bestand index.css. Nadat een uitdaging is voltooid, klik op de knop "Run Code" om de live pagina te bekijken en te controleren of de uitdaging correct is opgelost.

Daarnaast biedt elke uitdaging knoppen voor "Hint" en "Solution". Door op de knop "Hint" te klikken, worden hints getoond die relevant zijn voor de huidige taak, terwijl de knop "Solution" het codevoorbeeld met de juiste toepassing van CSS laat zien.

Taak

  1. Voeg relative positionering toe aan het tweede element met de classnaam item.
  2. Verplaats het item 30px naar beneden en 50px naar links.
index.html

index.html

index.css

index.css

copy
  1. Omlaag verplaatsen door een positieve waarde voor de top-eigenschap in te stellen.
  2. Naar links verplaatsen door een negatieve waarde voor de left-eigenschap in te stellen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 3
some-alt