Absolute et Fixed

• absolute : sort du flux et se place selon l'ancêtre positionné
• fixed : reste fixe à l'écran pendant le scroll

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Usages courants :

• absolute pour un bouton de fermeture dans une modale
• fixed pour un header ou un bouton "retour en haut"

A retenir

absolute depend d'un contexte parent positionne. fixed depend du viewport et reste visible pendant le scroll.

Mini pratique

Crée un bouton flottant fixed en bas a droite, et compare son comportement a un element absolute.

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.