Static et Relative

• static : position par defaut dans le flux normal
• relative : reste dans le flux mais peut être décalé

.badge {
  position: relative;
  top: 4px;
  left: 8px;
}

relative sert souvent de repère à un enfant positionné en absolute.

Important : un élément en relative conserve sa place initiale dans le flux, même s'il est visuellement décalé.

A retenir

relative est souvent une étape de préparation : il sert de référence locale pour des éléments absolute enfants.

Mini pratique

Place une pastille en coin d'une carte avec un enfant en absolute et un parent en relative.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.