Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Implémenter le Positionnement Absolu | Maîtrise du Positionnement CSS
Techniques CSS Avancées

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

  1. Appliquer le positionnement absolute à l’élément enfant.
  2. Calculer les valeurs des propriétés top et left pour centrer l’élément enfant dans 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. S’assurer qu’un élément possède un positionnement absolute et l’autre un positionnement relative afin d’é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, utiliser la formule : (parentHeight - childHeight) / 2.
  2. Pour calculer la valeur de la propriété left, utiliser 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

Suggested prompts:

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

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

  1. Appliquer le positionnement absolute à l’élément enfant.
  2. Calculer les valeurs des propriétés top et left pour centrer l’élément enfant dans 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. S’assurer qu’un élément possède un positionnement absolute et l’autre un positionnement relative afin d’é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, utiliser la formule : (parentHeight - childHeight) / 2.
  2. Pour calculer la valeur de la propriété left, utiliser 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