Défi : Implémenter le Positionnement Absolu
Tâche
Centrer l’élément enfant (div
avec le nom de classe child
) à l’intérieur de l’élément parent (div
avec le nom de classe parent
) en utilisant le positionnement absolu.
Étapes :
- Appliquer le positionnement
absolute
à l’élément enfant. - Calculer les valeurs des propriétés
top
etleft
pour centrer l’élément enfant dans l’élément parent. L’élément parent a une largeur et une hauteur de220px
, tandis que l’élément enfant a une largeur et une hauteur de80px
. - S’assurer qu’un élément possède un positionnement
absolute
et l’autre un positionnementrelative
afin d’établir le bon contexte de positionnement. Sinon, le positionnement absolu sera relatif à l’élémentbody
.
index.html
index.css
- Pour calculer la valeur de la propriété
top
, utiliser la formule :(parentHeight - childHeight) / 2
. - Pour calculer la valeur de la propriété
left
, utiliser la formule :(parentWidth - childWidth) / 2
.
index.html
index.css
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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
Défi : Implémenter le Positionnement Absolu
Glissez pour afficher le menu
Tâche
Centrer l’élément enfant (div
avec le nom de classe child
) à l’intérieur de l’élément parent (div
avec le nom de classe parent
) en utilisant le positionnement absolu.
Étapes :
- Appliquer le positionnement
absolute
à l’élément enfant. - Calculer les valeurs des propriétés
top
etleft
pour centrer l’élément enfant dans l’élément parent. L’élément parent a une largeur et une hauteur de220px
, tandis que l’élément enfant a une largeur et une hauteur de80px
. - S’assurer qu’un élément possède un positionnement
absolute
et l’autre un positionnementrelative
afin d’établir le bon contexte de positionnement. Sinon, le positionnement absolu sera relatif à l’élémentbody
.
index.html
index.css
- Pour calculer la valeur de la propriété
top
, utiliser la formule :(parentHeight - childHeight) / 2
. - Pour calculer la valeur de la propriété
left
, utiliser la formule :(parentWidth - childWidth) / 2
.
index.html
index.css
Merci pour vos commentaires !