Le positionnement
10 min · Intermédiaire · 7 août 2026
Quatre valeurs de position
text
static : comportement par defaut, aucun positionnement special
relative : reste a sa place, mais devient une reference pour ses enfants absolute
absolute : sort du flux normal, se place par rapport a son ancetre positionne
fixed : se place par rapport a la fenetre, reste visible meme au defilementLe cas classique : un badge dans une carte
css
.carte {
position: relative; /* devient la reference, sans se deplacer elle-meme */
}
.badge {
position: absolute;
top: 0;
right: 0;
}Attention
Sans position: relative sur .carte, le badge en absolute chercherait un ancêtre positionné plus haut dans la page, potentiellement le document entier : un piège fréquent quand le badge se retrouve dans un coin inattendu de la page.
À toi de jouer
Positionne .carte en relative, et .badge en absolute avec top: 0 et right: 0, pour que le badge apparaisse dans le coin supérieur droit de la carte.
html
<!-- HTML -->
<div class="carte">
<span class="badge">Nouveau</span>
Contenu de la carte
</div>
/* CSS */
.carte {
/* Complete le style ici */
}
.badge {
/* Complete le style ici */
}