Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Tillämpa Relativ Positionering | Bemästra CSS-positionering
Avancerade CSS-tekniker

bookUtmaning: Tillämpa Relativ Positionering

Obs

Varje utmaning i denna kurs innehåller ett kodexempel bestående av filerna index.html och index.css. Eftersom kursen fokuserar på att lära sig CSS rekommenderas det att lösa utmaningarna i filen index.css. När en utmaning är slutförd, klicka på knappen "Kör kod" för att visa den levande sidan och säkerställa att utmaningen är korrekt löst.

Dessutom tillhandahåller varje utmaning knapparna "Tips" och "Lösning". Genom att klicka på knappen "Tips" visas ledtrådar som är relevanta för den aktuella uppgiften, medan knappen "Lösning" visar kodexemplet med korrekt tillämpning av CSS.

Uppgift

  1. Lägg till relative positionering på det andra elementet med klassnamnet item.
  2. Flytta elementet 30px nedåt och 50px åt vänster.
index.html

index.html

index.css

index.css

copy
  1. Flytta nedåt genom att ange ett positivt värde för egenskapen top.
  2. Flytta åt vänster genom att ange ett negativt värde för egenskapen left.
index.html

index.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookUtmaning: Tillämpa Relativ Positionering

Svep för att visa menyn

Obs

Varje utmaning i denna kurs innehåller ett kodexempel bestående av filerna index.html och index.css. Eftersom kursen fokuserar på att lära sig CSS rekommenderas det att lösa utmaningarna i filen index.css. När en utmaning är slutförd, klicka på knappen "Kör kod" för att visa den levande sidan och säkerställa att utmaningen är korrekt löst.

Dessutom tillhandahåller varje utmaning knapparna "Tips" och "Lösning". Genom att klicka på knappen "Tips" visas ledtrådar som är relevanta för den aktuella uppgiften, medan knappen "Lösning" visar kodexemplet med korrekt tillämpning av CSS.

Uppgift

  1. Lägg till relative positionering på det andra elementet med klassnamnet item.
  2. Flytta elementet 30px nedåt och 50px åt vänster.
index.html

index.html

index.css

index.css

copy
  1. Flytta nedåt genom att ange ett positivt värde för egenskapen top.
  2. Flytta åt vänster genom att ange ett negativt värde för egenskapen left.
index.html

index.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 3
some-alt