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
course content

Contenu du cours

Techniques CSS Avancées

Techniques CSS Avancées

1. Introduction
2. Positionnement des Éléments
3. Transitions
4. Animations
5. Transformations
6. Sites Web et Applications Adaptatifs/Réactifs
7. Préprocesseurs

book
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 :

  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.
html

index.html

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.
html

index.html

css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5
We're sorry to hear that something went wrong. What happened?
some-alt