Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Positionnement Absolu | Positionnement des Éléments
Techniques CSS Avancées

bookDé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 :

  1. Appliquer le positionnement absolute à l'élément enfant.
  2. Calculer les valeurs pour les propriétés top et left 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 de 220px, tandis que l'élément enfant a une largeur et une hauteur de 80px.
  3. Assurez-vous qu'un élément a un positionnement absolute, et l'autre a un positionnement relative pour établir le bon contexte de positionnement. Sinon, le positionnement absolu sera relatif à l'élément body.
index.html

index.html

index.css

index.css

copy
  1. Pour calculer la valeur de la propriété top, utilisez la formule : (parentHeight - childHeight) / 2.
  2. Pour calculer la valeur de la propriété left, utilisez la formule : (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

bookDé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 :

  1. Appliquer le positionnement absolute à l'élément enfant.
  2. Calculer les valeurs pour les propriétés top et left 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 de 220px, tandis que l'élément enfant a une largeur et une hauteur de 80px.
  3. Assurez-vous qu'un élément a un positionnement absolute, et l'autre a un positionnement relative pour établir le bon contexte de positionnement. Sinon, le positionnement absolu sera relatif à l'élément body.
index.html

index.html

index.css

index.css

copy
  1. Pour calculer la valeur de la propriété top, utilisez la formule : (parentHeight - childHeight) / 2.
  2. Pour calculer la valeur de la propriété left, utilisez la formule : (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5
some-alt