Le badge égaré — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 6)

Le badge égaré

Positionnement et empilement · niveau 1 (application)

Énoncé

La pastille d'une carte apparaît tout en haut à droite de la page, et non sur la carte.


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

/* Erreur : .carte n'est pas positionnée */
.carte {
  width: 16rem;
  padding: 1rem;
  margin-left: 2rem;
  background: #fff;
  border: 1px solid #e2d8c9;
}

.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0 0.5rem;
  margin: 0;
  background: #e07a1f;
}

Expliquer et corriger. Mesurée dans Chromium, la carte commence à l'abscisse 48 et mesure 256 pixels de large, bordure de 1 pixel comprise : calculer l'abscisse du bord droit de la pastille corrigée.

Corrigé

La carte n'est pas positionnée : le badge cherche le plus proche ancêtre positionné, n'en trouve aucun et se place dans le bloc conteneur initial, à 0,5 rem du haut et du bord droit de la fenêtre (Chromium : ordonnée 8, bord droit à 792 dans une fenêtre de 800). On ajoute position: relative à .carte :


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.carte {
  position: relative;
  width: 16rem;
  padding: 1rem;
  margin-left: 2rem;
  background: #fff;
  border: 1px solid #e2d8c9;
}

.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0 0.5rem;
  margin: 0;
  background: #e07a1f;
}

Le bord droit de la carte est à $48 + 256 = 304$ ; celui de sa boîte de rembourrage à 303 (bordure de 1 pixel) ; le badge s'arrête 8 pixels avant, à 295. Chromium : abscisse 200,64 et largeur 94,36, soit bien 295.