Positionner les éléments : relative, absolute, fixed, sticky

Objectifs

À la fin de cette leçon, vous saurez :

• expliquer ce qu'est le flux normal et quand en sortir ;
• choisir entre relative, absolute, fixed et sticky selon l'effet voulu ;
• comprendre le rôle de l'ancêtre positionné et des propriétés top/right/bottom/left ;
• gérer la superposition avec z-index.

Le flux normal : la disposition par défaut

Jusqu'ici, chaque élément trouvait sa place tout seul : les blocs s'empilent verticalement, les éléments en ligne se suivent horizontalement. C'est le flux normal. La propriété position permet d'y déroger — mais elle fait plus : elle active aussi les propriétés de décalage top, right, bottom, left.

.badge {
  position: absolute;
  top: 0;
  right: 0;
}

Sans position déclarée (valeur par défaut static), ces quatre propriétés n'ont aucun effet. C'est le piège numéro un des débutants.

relative : décaler sans déranger

position: relative décale l'élément par rapport à sa place normale, et son ancienne place reste réservée : rien ne bouge autour.

.notice {
  position: relative;
  top: 10px;    /* descend de 10px */
  left: -5px;   /* se décale à gauche */
}

Deux usages principaux : un ajustement visuel fin, et surtout servir de repère pour un enfant en absolute (voir plus bas).

absolute : sortir du flux

Un élément en absolute quitte le flux : il ne réserve plus de place, et ses voisins remontent comme s'il n'existait pas. Il se positionne alors par rapport à son ancêtre positionné le plus proche — le premier parent qui a une position autre que static.

<article class="carte">        <!-- position: relative -->
  <h3>Réunion</h3>
  <span class="badge">3</span>
</article>

.carte { position: relative; }  /* devient le repère */
.badge {
  position: absolute;
  top: -8px;
  right: -8px;                  /* coin haut-droit, qui dépasse */
}

Si aucun ancêtre n'est positionné, le repère devient la page entière — cause classique d'un badge atterrit au mauvais endroit. Réflexe : l'enfant en absolute a besoin d'un parent en relative.

fixed et sticky : l'écran pour repère

fixed ancre l'élément à la fenêtre du navigateur (viewport) : il ne bouge jamais, même au défilement. Idéal pour un bandeau de cookies ou un bouton flottant.

.bandeau {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

sticky est un hybride : l'élément suit le flux normalement… jusqu'à ce que le défilement atteigne la valeur demandée, puis il « colle ».

thead th,
.menu {
  position: sticky;
  top: 0;       /* colle au haut de l'écran pendant le défilement */
}

Valeur	Repère	Reste dans le flux ?	Usage typique
static	—	oui	défaut
relative	sa place normale	oui (place réservée)	ajustement, repère parent
absolute	ancêtre positionné	non	badge, popover
fixed	viewport	non	bandeau, bouton flottant
sticky	viewport après accroche	oui jusqu'au collage	en-tête de tableau, menu

z-index : qui passe devant ?

Dès que des éléments se superposent, l'ordre de dessin décide. z-index fixe cet ordre parmi les éléments positionnés : plus la valeur est grande, plus l'élément est devant.

.modal     { position: fixed; z-index: 100; }
.overlay   { position: fixed; z-index: 50; }

Pas besoin de 999999 : ce qui compte est l'ordre relatif. Une dizaine bien choisie (10, 20, 100) suffit largement et reste lisible dans le code.

Exercice

1. Dans votre page CV (chapitre 13), ajoutez un <span class="compteur"> dans l'en-tête et faites-en un badge collé au coin supérieur droit de l'en-tête.
2. L'en-tête refuse de servir de repère : expliquez pourquoi, puis corrigez avec une seule ligne CSS.
3. Rendez la barre de navigation collante en haut pendant le défilement.
4. Ajoutez un bouton « retour en haut » fixé au coin bas-droit, visible même en bas de page.
5. Un élément en absolute se retrouve en haut de la page au lieu du coin de sa carte : quelle question vous posez-vous en premier ?

Résumé

• Sans position (autre que static), top/right/bottom/left ne font rien.
• relative décale sans libérer la place, et sert de repère aux enfants.
• absolute sort du flux et se cale sur l'ancêtre positionné le plus proche.
• fixed vise le viewport ; sticky colle après un point de déclenchement.
• z-index arbitre les superpositions entre éléments positionnés.

.compteur {
  position: absolute;
  top: 0;
  right: 0;
}

.retour-haut {
  position: fixed;
  bottom: 16px;
  right: 16px;
}