CSS — Positionnement¶
Par défaut, les éléments d’une page se placent les uns à la suite des autres, de haut en bas, selon ce qu’on appelle le flux normal. La propriété position permet de s’écarter de ce flux : décaler un élément, le superposer à un autre, le coller en haut de l’écran… Ce chapitre détaille ses cinq valeurs et la propriété z-index qui gère les superpositions.
La propriété position¶
Valeur |
Comportement |
|---|---|
|
Position normale (défaut) |
|
Relative à sa position normale |
|
Par rapport au parent positionné |
|
Par rapport à la fenêtre |
|
Hybride relative / fixed |
Toutes ces valeurs (sauf static) s’utilisent avec les propriétés de décalage top, right, bottom, left, et avec z-index pour l’empilement. Voyons-les dans l’ordre.
position: static¶
C’est la position normale, celle de tous les éléments par défaut. L’élément suit le flux, et les propriétés de décalage sont ignorées.
div {
position: static; /* Valeur par défaut */
}
En pratique, vous n’écrirez presque jamais cette valeur explicitement : elle ne sert qu’à annuler un positionnement hérité.
position: relative¶
L’élément est décalé par rapport à sa position normale, sans quitter le flux.
.box {
position: relative;
top: 20px;
left: 30px;
}
Trois caractéristiques importantes : l’élément reste dans le flux (son emplacement d’origine reste réservé, comme un fantôme), le décalage est relatif à ce point de départ, et — point crucial — il crée une référence pour les éléments en position: absolute qu’il contient. C’est ce dernier rôle qui rend relative indispensable, comme on va le voir.
position: absolute¶
L’élément est positionné par rapport à son ancêtre positionné le plus proche (le premier parent en relative, absolute, fixed ou sticky).
.parent {
position: relative;
}
.child {
position: absolute;
top: 10px;
right: 10px;
}
Deux caractéristiques : l’élément sort du flux (il ne réserve plus de place, les autres l’ignorent) et, s’il n’a aucun parent positionné, il se cale par rapport au <body>. D’où le duo classique : on met le parent en relative pour qu’il serve de cadre, et l’enfant en absolute pour le placer librement à l’intérieur.
Exemple : un badge sur une carte¶
C’est le cas d’école du couple relative / absolute. On veut épingler un badge « NEW » dans le coin d’une carte :
<div class="card">
<span class="badge">NEW</span>
<h3>Titre</h3>
<p>Contenu</p>
</div>
.card {
position: relative;
padding: 20px;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
background: red;
color: white;
padding: 5px 10px;
}
La carte en relative devient le cadre de référence ; le badge en absolute se loge à 10px du haut et de la droite de la carte, pas de la page.
position: fixed¶
L’élément est positionné par rapport à la fenêtre du navigateur, et n’en bouge plus, même au défilement.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Il sort du flux et ne bouge pas au scroll : c’est le comportement recherché pour les en-têtes qui restent visibles ou les boutons flottants.
Attention à un effet de bord : comme l’élément fixe sort du flux, le contenu peut passer dessous. On compense en réservant l’espace correspondant :
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 60px;
}
body {
padding-top: 60px; /* Hauteur du header fixe */
}
position: sticky¶
sticky est un hybride entre relative et fixed, et l’une des valeurs les plus utiles du CSS moderne.
.sidebar {
position: sticky;
top: 20px;
}
Son comportement se déroule en trois temps : l’élément se comporte comme relative tant qu’on ne l’a pas atteint au défilement ; arrivé au seuil indiqué (ici top: 20px), il se fige comme fixed ; puis il redevient relative quand on atteint la fin de son conteneur. On s’en sert pour des barres latérales qui suivent la lecture ou des en-têtes de tableau qui restent visibles.
z-index — l’ordre d’empilement¶
Lorsque des éléments positionnés se chevauchent, z-index décide lequel passe devant.
.back {
position: absolute;
z-index: 1;
}
.front {
position: absolute;
z-index: 2; /* Au-dessus */
}
Deux règles : z-index ne fonctionne que sur un élément dont la position n’est pas static, et plus sa valeur est élevée, plus l’élément est au premier plan.
Pour garder un projet lisible, on adopte souvent des paliers espacés plutôt que 1, 2, 3 :
.navbar { position: fixed; z-index: 100; }
.overlay { position: fixed; z-index: 199; }
.modal { position: fixed; z-index: 200; }
Convention : des valeurs espacées (100, 200, 300…) laissent de la marge pour insérer un élément intermédiaire sans tout renuméroter.
Centrer un élément avec absolute¶
Une technique classique combine absolute et transform pour centrer parfaitement un élément, horizontalement et verticalement :
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
L’explication tient en deux temps : top: 50%; left: 50% place le coin supérieur gauche de l’élément au centre (ce qui le décale donc vers le bas à droite) ; transform: translate(-50%, -50%) le ramène de la moitié de sa propre taille, recentrant ainsi son milieu. Alternative : Flexbox et Grid, étudiés dans les chapitres suivants, rendent ce centrage bien plus simple — mais cette méthode reste utile à connaître.
Récapitulatif¶
Valeur |
Flux |
Référence |
|---|---|---|
|
Dans le flux |
— |
|
Dans le flux |
Sa position normale |
|
Hors du flux |
Parent positionné |
|
Hors du flux |
Fenêtre |
|
Dans puis hors |
Conteneur |
À retenir : relative pour créer une référence, absolute pour placer librement à l’intérieur de cette référence, fixed pour ancrer à l’écran, sticky pour un comportement qui suit la lecture. Et dans tous les cas, les DevTools restent votre meilleur allié pour comprendre où va réellement un élément.