Position CSS: relative vs absolute — Guide atelier

Vous ne vous êtes jamais arraché les cheveux sur un absolute qui refuse obstinément de se placer là où il faut, ou sur un relative “oublié” qui fait tout dérailler ? Ce guide-atelier va droit au but: on colle le code, on observe le comportement dans l’inspecteur, on fait la capture, et on ancre définitivement les bonnes pratiques dans la mémoire musculaire

Au programme, des cas concrets et reproductibles: ancrer un badge proprement, déployer un overlay qui épouse son conteneur, centrer un bloc de manière fiable, éviter le piège du parent non positionné et piloter la superposition avec z-index et les contextes d’empilement
Mode d’emploi: copier-coller chaque snippet dans un bac à sable (CodePen/StackBlitz/VS Code), ouvrir l’inspecteur, activer/désactiver les règles clés, redimensionner la fenêtre puis réaliser une capture “avant / après” pour chaque atelier

Objectif: sortir du flou entre relative et absolute, gagner en vitesse d’exécution sur les layouts du quotidien, et bâtir des interfaces propres, robustes et faciles à maintenir

Réponse directe

• En CSS, relative garde l’élément dans le flux, l’espace reste réservé, puis applique des décalages visuels via top/right/bottom/left.
• En CSS, absolute sort l’élément du flux et l’ancre au premier ancêtre “positionné”, ou au viewport s’il n’en trouve pas.

Atelier 1 — Carte + badge ancré

Objectif:
Ancrer un badge en haut à droite d’une carte sans perturber la grille.
À essayer:
Coller le code, activer l’inspecteur, vérifier que le badge ne réserve pas d’espace dans le flux et reste ancré au coin.

<div class="card">
  <img src="https://picsum.photos/600/300" alt="Aperçu" class="thumb">
  <span class="badge">Pro</span> 
</div>Langage du code : HTML, XML (xml)

.card { position: relative; width:auto; max-width:400px; }
.card img { width: 100% }
.badge {
  position: absolute;
  top: 8px; right: 8px;
  padding: 0.25rem 1rem;
  background: white;
  border: 1px solid red;
}Langage du code : CSS (css)

Atelier 2 — Overlay couvrant un parent (inset: 0)

Objectif:
Recouvrir proprement un conteneur pour un état “loading” ou une modale, sans scroll parasite.
À essayer:
Redimensionner le conteneur, confirmer que l’overlay suit ses bords grâce à inset: 0 sur un parent positionné.

<div class="wrapper">
  <img src="https://picsum.photos/600/300" alt="Aperçu">
  <div class="overlay"></div>
</div>Langage du code : HTML, XML (xml)

.wrapper { position: relative; max-width: 400px }
.wrapper img { width: 100%}
.overlay {
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  background: rgba(0,0,0,.35);
  width: 100%;
}Langage du code : CSS (css)

Atelier 3 — Centrage fiable (transform)

Objectif:
Centrer un bloc dans son parent de manière robuste, responsive et prédictible.

À essayer:
Réduire/agrandir la fenêtre et constater la stabilité du centrage, sans dépendances à des marges approximatives.

<div class="parent">
  <div class="centered">CTA</div>
</div>Langage du code : HTML, XML (xml)

.parent { position: relative; min-height: 50vh; }
.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}Langage du code : CSS (css)

Vous devriez constater en adaptant votre fenêtre d’affichage ou la frame que le centrage reste toujours parfait au pixel prêt.

Atelier 4 — Référentiel manquant (le piège classique)

Objectif: montrer le “saut” d’un enfant absolute quand le parent n’est pas positionné, puis le corriger avec position: relative sur le parent.
À essayer: commenter puis réactiver position: relative; sur le parent et observer l’ancrage passer du viewport au conteneur.

<!-- Avant (bug) -->
<div class="box">
  <div class="pin"></div>
</div>

<!-- Après (fix) -->
<div class="box fixed">
  <div class="pin"></div>
</div>Langage du code : HTML, XML (xml)

.box {
  /* static par défaut */
  width: 240px;
  height: 160px;
  background: #f3f4f6;
}
.pin {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: #60a5fa;
}
/* Correctif : définir le référentiel local */
.box.fixed {
  position: relative;
}
Langage du code : CSS (css)

Atelier 5 — Superposition contrôlée (z-index et contextes)

Objectif:
Manipuler l’ordre d’empilement puis illustrer la création d’un contexte d’empilement via transform/opacity.
À essayer:
Permuter z-index, puis ajouter transform: translateZ(0) sur un panneau pour observer le nouveau contexte dans DevTools.

<div class="stage">
  <div class="panel panel-a">A</div>
  <div class="panel panel-b">B</div>
</div>Langage du code : HTML, XML (xml)

.stage {
  position: relative;
  height: 240px;
}
.panel {
  position: absolute;
  width: 160px;
  height: 160px;
}
.panel-a {
  top: 40px;
  left: 40px;
  background: #4ade80;
  z-index: 1;
}
.panel-b {
  top: 80px;
  left: 80px;
  background: #60a5fa;
  z-index: 2;
}
/* Expérimentation : décommenter pour créer un contexte d'empilement
.panel-b { transform: translateZ(0); }
*/
Langage du code : CSS (css)

Atelier 6 — Décalages avec top/left (relative vs absolute)

Objectif:
Comprendre que top/left décalent visuellement un élément positionné, sans influencer le flux pour absolute, et en conservant l’espace pour relative.

À essayer:
Appliquer top/left sur le même bloc en relative puis en absolute et observer la différence d’impact sur les éléments frères.

<div class="block--relative">
  <div class="block--absolute"></div>
</div>Langage du code : HTML, XML (xml)

.block--relative {
  position: relative;
  top: 20px; left: 20px;   /* espace d’origine conservé */
  background: red;
  width: 250px;
  height: 100px;
}
.block--absolute {
  position: absolute;
  top: 20px; left: 20px;   /* retiré du flux, les frères se referment */
  background: blue;
  width: 250px;
  height: 100px;
}Langage du code : CSS (css)

Bonnes pratiques à retenir

• Structurer la page avec Flex/Grid et réserver relative/absolute aux détails d’UI (badges, overlays, popovers) et micro-ajustements.
• Toujours positionner le parent lorsqu’un enfant doit s’ancrer localement (position: relative; sur le conteneur).
• Gérer la superposition avec z-index uniquement si nécessaire et comprendre les contextes d’empilement pour éviter les effets de bord.

Checklist avant capture

• Le parent de l’enfant absolute est-il “positionné” pour fournir le référentiel local attendu ?
• L’overlay épouse-t-il le parent via inset: 0, sans provoquer de scroll involontaire ou de débordement ?
• Les modifications de z-index et transform créent-elles un contexte d’empilement visible dans DevTools, confirmant l’ordre d’affichage souhaité ?

Conclusion actionnable

Utiliser relative pour créer un contexte local et réaliser des micro-ajustements, et absolute pour sortir du flux et positionner précisément des éléments superposés, en s’appuyant sur Flex/Grid pour la structure principale du layout ; valider chaque atelier en collant le code dans un bac à sable, puis en réalisant des captures “avant/après” afin d’ancrer les comportements dans la pratique et de documenter les choix d’implémentation.