Skip to main content

Chapitre 24 : Positionnement relatif et absolu

Sortir du flux normal avec la propriété position pour créer des mises en page complexes et superposées.

Le flux normal (normal flow) est le comportement par défaut du navigateur : les éléments s'empilent verticalement (blocs) ou s'alignent horizontalement (inline). Cependant, pour créer des interfaces modernes — comme des badges de notification, des menus déroulants ou des images avec du texte superposé — nous devons apprendre à "briser" ce flux.

C'est ici qu'intervient la propriété position.

Le Positionnement Relatif​

1. Quoi​

Le positionnement relatif (position: relative) permet de déplacer un élément par rapport à sa position d'origine dans le flux normal, sans affecter la disposition des éléments voisins.

L'élément reste "ancré" à sa place initiale : l'espace qu'il occupait est préservé, même si l'élément est visuellement décalé.

2. Pourquoi​

En milieu professionnel, le positionnement relatif est utilisé pour deux raisons principales :

  1. Ajustements mineurs : Décaler légèrement un icône ou un texte sans casser tout le layout.
  2. Point de référence : C'est l'usage le plus courant. Un élément en relative sert de "conteneur de référence" pour ses enfants positionnés en absolute.

3. Comment​

A. Syntaxe de base​

Pour déplacer un élément, on utilise position: relative combiné avec les propriétés de décalage : top, right, bottom, left.

.box {
  position: relative;
  top: 10px;  /* Pousse l'élément de 10px vers le bas par rapport à son origine */
  left: 20px; /* Pousse l'élément de 20px vers la droite par rapport à son origine */
}

B. Cas concret : Ajustement d'un badge​

Imaginons un bouton avec un petit badge de notification qui doit être légèrement décalé pour un rendu esthétique.

.button-container {
  display: inline-block;
  position: relative; /* Sert de référence pour le badge */
  padding: 10px 20px;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
}

.notification-badge {
  position: absolute; /* On verra le détail au chapitre suivant, mais ici il s'appuie sur le parent */
  top: -5px;
  right: -5px;
  background-color: red;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

C. Limitations​

Le positionnement relatif ne permet pas de créer des superpositions complexes seul. Puisqu'il préserve l'espace original, déplacer un élément trop loin peut créer des "trous" visuels dans votre mise en page, car les éléments suivants ne remontent pas pour combler le vide.

4. Zone de Danger​

❌ Erreur commune : Utiliser position: relative pour créer une mise en page entière (grille) en décalant tous les éléments avec top et left. Cela rend le site impossible à maintenir et non responsive.

✅ Bonne pratique : Utiliser Flexbox ou Grid pour la structure globale, et réserver position: relative pour des micro-ajustements ou pour définir un contexte de positionnement pour des enfants.

Le Positionnement Absolu​

1. Quoi​

Le positionnement absolu (position: absolute) retire complètement l'élément du flux normal.

L'élément ne prend plus de place dans le document. Les autres éléments se comportent comme s'il n'existait pas. Il est positionné par rapport à son ancêtre positionné le plus proche (un élément dont la propriété position est différente de static). Si aucun ancêtre n'est positionné, il se réfère à l'élément racine <html>.

2. Pourquoi​

C'est l'outil indispensable pour :

  • Superposer des éléments (ex: texte sur une image).
  • Créer des éléments flottants (tooltips, menus contextuels).
  • Placer des éléments précisément dans un coin d'un composant.

3. Comment​

A. Syntaxe de base​

L'élément absolu utilise top, right, bottom, left pour définir sa distance par rapport aux bords de son parent positionné.

.parent {
  position: relative; /* Crucial : définit la zone de référence */
}

.enfant-absolu {
  position: absolute;
  bottom: 0;
  right: 0; /* Colle l'élément en bas à droite du parent */
}

B. Cas concret : Carte produit avec badge "Promo"​

Voici comment implémenter une carte produit où le badge de promotion est superposé à l'image.

<div class="product-card">
  <div class="image-container">
    <img src="product.jpg" alt="Produit" />
    <span class="promo-badge">-20%</span>
  </div>
  <div class="product-info">
    <h3>Chaussures Running</h3>
    <p>99,00 €</p>
  </div>
</div>
.product-card {
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
}

.image-container {
  position: relative; /* Le badge sera positionné par rapport à ce div */
  width: 100%;
  height: 200px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #ef4444;
  color: white;
  padding: 4px 8px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 10; /* Assure que le badge reste au-dessus de l'image */
}

C. Limitations​

Le principal piège est l'oubli du position: relative sur le parent. Sans cela, l'élément absolu "s'échappe" et va se positionner par rapport au corps de la page (body), ce qui brise totalement le design dès que la fenêtre change de taille.

4. Zone de Danger​

❌ Erreur commune : Oublier que l'élément absolu n'a plus de largeur automatique basée sur le flux. Un élément absolute a tendance à se rétracter au minimum nécessaire pour contenir son contenu (shrink-to-fit).

✅ Bonne pratique : Si vous voulez qu'un élément absolu occupe toute la largeur du parent, utilisez left: 0; right: 0; ou width: 100%;.

Logique du positionnement CSS​

Questions clés​

1. Quelle est la différence fondamentale entre relative et absolute concernant le flux du document ?

Découvrir la réponse

L'élément relative reste dans le flux : il occupe toujours son espace d'origine, même s'il est déplacé visuellement. L'élément absolute est retiré du flux : il ne prend plus de place, et les éléments suivants remontent pour occuper l'espace vide.

2. Que se passe-t-il si je mets un élément en position: absolute mais qu'aucun de ses parents n'est positionné ?

Découvrir la réponse

L'élément remontera toute la chaîne du DOM jusqu'à trouver le premier ancêtre positionné. S'il n'en trouve aucun, il se positionnera par rapport à l'élément racine <html> (le viewport).

3. Pourquoi utilise-t-on souvent position: relative sur un parent alors qu'on ne veut pas déplacer ce parent ?

Découvrir la réponse

On le fait uniquement pour créer un "contexte de positionnement". Cela indique aux enfants en position: absolute que leurs coordonnées (top, left, etc.) doivent être calculées à partir des bords de ce parent et non de la page entière.

4. Comment centrer un élément en position: absolute ?

Découvrir la réponse

La technique classique consiste à utiliser top: 50% et left: 50%, puis à compenser la taille de l'élément avec transform: translate(-50%, -50%).

Mise en pratique​

Exercice 1 : Reproduction guidée​

Objectif : Créer un badge de notification simple.

HTML de départ :

<div class="icon-bell">
  <span class="badge">1</span>
</div>
  • Stylez .icon-bell comme un carré gris de 50px x 50px avec des coins arrondis.
  • Stylez .badge comme un cercle rouge de 20px x 20px avec le chiffre "1" blanc centré.
  • Le badge doit dépasser légèrement du bord supérieur et droit de l'icône.
Découvrir la solution commentée
.icon-bell {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  position: relative; /* Point de référence pour le badge */
  border-radius: 8px;
}

.badge {
  position: absolute;
  top: -5px;    /* Sort légèrement vers le haut */
  right: -5px;  /* Sort légèrement vers la droite */
  width: 20px;
  height: 20px;
  background-color: red;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

Exercice 2 : Adaptation​

Objectif : Créer un effet de "Overlay" sur une image.

  • Prenez une image de fond.
  • Ajoutez un rectangle noir semi-transparent qui couvre tout le bas de l'image.
  • À l'intérieur de ce rectangle, placez un titre blanc aligné à gauche et un bouton "Lire la suite" aligné à droite.
  • Le rectangle doit être fixé au bas de l'image, peu importe la taille de celle-ci.
Découvrir la solution commentée
.card {
  position: relative; /* Référence pour l'overlay */
  width: 300px;
}

.card img {
  width: 100%;
  display: block;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; /* Étend l'overlay sur toute la largeur */
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box; /* Important pour que le padding ne dépasse pas */
}

Exercice 3 : Conception​

Objectif : Créer un composant "Tooltip" personnalisé.

HTML de départ :

<div class="tooltip-container">
  <button>Survolez-moi</button>
  <span class="tooltip-text">Ceci est une info-bulle</span>
</div>
  • La bulle (.tooltip-text) doit être invisible par défaut et apparaître au survol du .tooltip-container.
  • Elle doit être positionnée juste au-dessus du bouton et parfaitement centrée horizontalement.
  • Utilisez position: relative sur le conteneur et position: absolute sur la bulle.
  • Ajoutez une transition douce sur l'opacité.
Découvrir la solution commentée
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  position: absolute;
  bottom: 125%; /* Place la bulle au dessus du bouton */
  left: 50%;
  transform: translateX(-50%); /* Centre parfaitement l'élément */
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* Évite que la bulle interfère avec la souris */
}

.tooltip-container:hover .tooltip-text {
  opacity: 1;
}