Contenu du cours
Techniques CSS Avancées
Techniques CSS Avancées
Défi : 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 pour les propriétés
top
etleft
afin de centrer l'élément enfant à l'intérieur de 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
.Assurez-vous qu'un élément a un positionnement
absolute
, et l'autre a un positionnementrelative
pour é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
, utilisez la formule :(parentHeight - childHeight) / 2
.Pour calculer la valeur de la propriété
left
, utilisez la formule :(parentWidth - childWidth) / 2
.
index.html
index.css
Merci pour vos commentaires !