🏆 Challenge #N9 · Absolute HTML · challenges/N9_absolute.html CSS · challenges/css/N9_absolute.css


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

Mémo

// Un élément en position absolute se positionne par rapport à l'élément parent en relative le plus proche

position: absolute; // Défini le mode d'affichage en absolute
position: relative; // Défini le mode d'affichage en relative


top: 0 | 25% | 5rem // Défini la position par rapport au haut de l'élément parent en relative
right: 0 | 25% | 5rem // Défini la position par rapport au côté droit de l'élément parent en relative
left: 0 | 25% | 5rem // Défini la position par rapport au côté gauche de l'élément parent en relative
bottom: 0 | 25% | 5rem // Défini la position par rapport au bas de l'élément parent en relative


z-index: 0 | 9999999; // Défini la priorité d'affichage, de 0 à l'infini

1️⃣ Faites flotter les éléments

Faites flotter les éléments enfants par rapport à la boite parent (verte) pour arriver au résultat attendu.

Centrer la boîte jaune au centre (Le challenge N#12 · Transform est nécessaire pour pouvoir comprendre cette sorcellerie)

🎯 Résultat attendu

Résultat attendu