Le badge épinglé

🎯 Objectif

Épingler un badge dans le coin d'une carte. Et surtout : comprendre par rapport à quoi il se place. C'est l'exercice le plus piégeux du module.

📖 Exemple

Le club de jeux du collège épingle une vignette « Nouveau ! » sur la carte de son tournoi :

<div class="jeu">
    <p class="vignette">Nouveau !</p>
    <h3>Tournoi Mario Kart</h3>
    <p class="detail">Mercredi 14 h · salle informatique</p>
</div>

.jeu {
    position: relative;
    width: 280px;
    padding: 16px;
    border: 2px solid #226347;
    background-color: #ffffff;
}

.jeu h3 {
    margin: 0 0 8px 0;
}

.detail,
.vignette {
    margin: 0;
}

.vignette {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background-color: #d45e95;
}

Pourquoi ça marche ? La valeur absolute fait deux choses d'un coup. Un : la vignette quitte le flux — sa place se libère, le titre remonte. Deux : elle se place où on le dit, à 12 pixels du haut et 12 de la droite. Mais du haut de quoi ?

Un élément en absolute se place par rapport au premier ancêtre positionné qu'il trouve en remontant l'arbre HTML.

D'où la valeur relative posée sur la carte du jeu : elle ne la déplace pas d'un pixel — aucun décalage ne l'accompagne — mais elle en fait le repère de ses descendants. Sans elle, la vignette partirait se coller au coin de la page entière. Retiens le couple dans cet ordre : relative sur le parent, absolute sur l'enfant. Badge sur une carte, croix de fermeture sur une fenêtre, pastille de notification sur une icône — c'est toujours lui.

📝 Consigne

Le concert de Rock'Air affiche complet, mais son badge est posé dans le flux, au-dessus du titre. Même couple que l'exemple, autre carte, autres distances — dans l'onglet CSS :

1. Dans .carte, ajoute la déclaration qui fait de la carte le repère de ses enfants sans la déplacer — la valeur de position qui reste dans le flux.
2. Dans .badge, ajoute trois déclarations : la valeur de position qui sort le badge du flux pour l'épingler, puis 8 pixels depuis le haut et 8 pixels depuis la droite.

L'ordre compte : commence par la carte. Puis, une fois l'exercice réussi, retire la ligne de la carte juste pour voir — le badge s'envole dans le coin de l'aperçu. C'est le meilleur moyen de graver la règle : le jour où un élément part se coller au coin de l'écran sans raison, tu sauras en trois secondes ce qui manque.