Utmaning: 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:
- Använd
absolute
positionering på det underordnade elementet. - Beräkna värdena för egenskaperna
top
ochleft
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
. - Säkerställ att ett element har
absolute
positionering och det andra harrelative
positionering för att skapa rätt positioneringskontext. Annars kommer den absoluta positioneringen att vara relativ tillbody
-elementet.
index.html
index.css
- För att beräkna värdet för egenskapen
top
, använd formeln:(parentHeight - childHeight) / 2
. - För att beräkna värdet för egenskapen
left
, använd formeln:(parentWidth - childWidth) / 2
.
index.html
index.css
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 2. Kapitel 5
Fråga AI
Fråga AI
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
Utmaning: 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:
- Använd
absolute
positionering på det underordnade elementet. - Beräkna värdena för egenskaperna
top
ochleft
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
. - Säkerställ att ett element har
absolute
positionering och det andra harrelative
positionering för att skapa rätt positioneringskontext. Annars kommer den absoluta positioneringen att vara relativ tillbody
-elementet.
index.html
index.css
- För att beräkna värdet för egenskapen
top
, använd formeln:(parentHeight - childHeight) / 2
. - För att beräkna värdet för egenskapen
left
, använd formeln:(parentWidth - childWidth) / 2
.
index.html
index.css
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 2. Kapitel 5