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

bookUtmaning: Implementera Absolut Positionering

Uppgift

Centrera det underordnade elementet (div med klassenamn child) inom det överordnade elementet (div med klassenamn parent) med hjälp av absolut positionering.

Steg:

  1. Använd absolute positionering på det underordnade elementet.
  2. Beräkna värdena för egenskaperna top och left för att centrera det underordnade elementet inom det överordnade elementet. Det överordnade elementet har en bredd och höjd på 220px, medan det underordnade elementet har en bredd och höjd på 80px.
  3. Säkerställ att ett element har absolute positionering och det andra har relative positionering för att skapa rätt positioneringskontext. Annars kommer den absoluta positioneringen att vara relativ till body-elementet.
index.html

index.html

index.css

index.css

copy
  1. För att beräkna värdet för egenskapen top, använd formeln: (parentHeight - childHeight) / 2.
  2. För att beräkna värdet för egenskapen left, använd formeln: (parentWidth - childWidth) / 2.
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 5

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: Implementera Absolut Positionering

Svep för att visa menyn

Uppgift

Centrera det underordnade elementet (div med klassenamn child) inom det överordnade elementet (div med klassenamn parent) med hjälp av absolut positionering.

Steg:

  1. Använd absolute positionering på det underordnade elementet.
  2. Beräkna värdena för egenskaperna top och left för att centrera det underordnade elementet inom det överordnade elementet. Det överordnade elementet har en bredd och höjd på 220px, medan det underordnade elementet har en bredd och höjd på 80px.
  3. Säkerställ att ett element har absolute positionering och det andra har relative positionering för att skapa rätt positioneringskontext. Annars kommer den absoluta positioneringen att vara relativ till body-elementet.
index.html

index.html

index.css

index.css

copy
  1. För att beräkna värdet för egenskapen top, använd formeln: (parentHeight - childHeight) / 2.
  2. För att beräkna värdet för egenskapen left, använd formeln: (parentWidth - childWidth) / 2.
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 5
some-alt