Module 2La mise en page
Chapitre 8 sur 15
Le positionnement
Relative, absolute, fixed, sticky et z-index, avec les cas pratiques classiques.
- ≈ 165 min
- 7 leçons
- 8 vidéos
- 3 exercices
Module 2La mise en page
Chapitre 8 sur 15
Relative, absolute, fixed, sticky et z-index, avec les cas pratiques classiques.
Objectifs
Avec ce chapitre, tu sauras…
position : static, relative, absolute, fixed, sticky ;top, right, bottom, left et inset ;relative + absolute ;z-index ;Flexbox et Grid placent les éléments dans le flux. Mais certains éléments doivent flotter au-dessus des autres : un badge « Promo » dans le coin d'une carte, un menu qui reste en haut de l'écran, un bouton de discussion en bas à droite, une fenêtre modale. C'est le rôle de la propriété position.
Leçon 1
Tableau: Les cinq valeurs
| Valeur | Dans le flux ? | Se positionne par rapport à… | Usage typique |
|---|---|---|---|
static | oui | — (valeur par défaut, top/left ignorés) | tout le reste |
relative | oui, sa place est gardée | sa propre position d'origine | petit décalage ; référence pour un enfant absolute |
absolute | non | le premier ancêtre positionné | badge, calque, info-bulle |
fixed | non | la fenêtre du navigateur | bouton flottant, bandeau cookies |
sticky | oui | son conteneur, puis colle au bord de l'écran au défilement | en-tête, titres de tableau |
Vidéo · À regarder
FRLes Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR
NadfriJS · YouTube
Vidéo · À regarder
FRLes Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR
NadfriJS · YouTube
Leçon 2
Vidéo · À regarder
FRLes Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR
NadfriJS · YouTube
Leçon 3
Vidéo · À regarder
FRLes Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR
NadfriJS · YouTube
Leçon 4
Vidéo · À regarder
FRLes Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR
NadfriJS · YouTube
Leçon 5
Vidéo · À regarder
FRLes Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR
NadfriJS · YouTube
Leçon 6
Leçon 7
Vidéo · À regarder
FRLes Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR
NadfriJS · YouTube
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
1Quelle valeur est la valeur par défaut de position ?
2Un élément absolute se place par rapport…
3Quel élément reste au même endroit de l'écran au défilement ?
4inset: 0 équivaut à…
5Pour qu'un en-tête colle en haut lors du défilement :
6z-index fonctionne sur…
L'essentiel du chapitre
static (défaut) · relative (décalé, place gardée, repère) · absolute (hors flux, par rapport à l'ancêtre positionné) · fixed (par rapport à la fenêtre) · sticky (colle au défilement).top, right, bottom, left, inset : seulement si l'élément est positionné.relative + enfant absolute : badges, calques, info-bulles.sticky a besoin d'un seuil (top: 0) et d'aucun ancêtre en overflow: hidden.z-index : le plus grand passe devant, dans son contexte d'empilement. Utilise une échelle.Les propriétés de décalage top, right, bottom et left (ou le raccourci inset) ne fonctionnent que si position n'est pas static.
Les différents types de positionnement présentés en un peu plus d'une minute, avant le détail de chacun.
Les outils de développement pour observer le positionnement : sers-t'en pendant tout ce chapitre.
.decale {
position: relative;
top: 10px; /* 10px vers le bas */
left: 20px; /* 20px vers la droite */
}Un élément relative est dessiné décalé, mais sa place d'origine reste réservée dans le flux, comme un fantôme : les éléments voisins ne bougent pas. top: 10px signifie « éloigne-toi de 10 px du haut », donc descends.
En pratique, on utilise rarement relative pour décaler un élément. Son vrai rôle est de servir de repère à un enfant absolute (section 3).
La position relative en détail, avec des exemples dans le navigateur.
Un élément absolute est retiré du flux (les autres éléments se comportent comme s'il n'existait pas) et se place par rapport au premier ancêtre positionné, c'est-à-dire le parent le plus proche qui a une position autre que static. S'il n'en trouve aucun, il se place par rapport à la page entière.
<div class="carte">
<img src="images/babouches.jpg" alt="Babouches jaunes" width="300" height="200">
<span class="badge">-30 %</span>
<h3>Babouches en cuir</h3>
</div>.carte {
position: relative; /* devient le repère */
}
.badge {
position: absolute;
top: 10px;
right: 10px; /* dans le coin supérieur droit de la carte */
background-color: #c0392b;
color: white;
padding: 0.25em 0.6em;
border-radius: 4px;
}<div style="font-family:Inter,sans-serif;position:relative;width:200px;border:1px solid #dde3ee;border-radius:8px;overflow:hidden">
<div style="height:90px;background:linear-gradient(135deg,#f4d35e,#e0a526)"></div>
<span style="position:absolute;top:8px;right:8px;background:#c0392b;color:#fff;padding:2px 6px;border-radius:4px;font-size:8pt;font-weight:700">-30 %</span>
<div style="padding:6px 8px;font-weight:700;font-size:9pt">Babouches en cuir</div>
</div>Tu as mis position: absolute; top: 0; right: 0; sur le badge, et il apparaît dans le coin supérieur droit de la page, pas de la carte. Tu as oublié position: relative sur la carte : sans ancêtre positionné, le repère est la page entière. C'est l'erreur numéro un avec absolute.
Un calque sur toute la surface du parent
.vignette {
position: relative;
}
.vignette .calque {
position: absolute;
inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
background-color: rgb(23 48 110 / 70%);
color: white;
opacity: 0;
}
.vignette:hover .calque {
opacity: 1; /* apparaît au survol */
}La position absolute : observe à chaque exemple par rapport à quel élément l'élément se place.
Un élément fixed est placé par rapport à la fenêtre : il reste au même endroit de l'écran quand on fait défiler la page.
.retour-haut {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #2f5bc4;
color: white;
}Un en-tête fixed en haut de page sort du flux : le début du contenu passe dessous. Il faut ajouter au body un padding-top égal à la hauteur de l'en-tête. Souvent, sticky (section 5) est une meilleure solution, car il ne sort pas du flux.
La position fixed : fais défiler la page de démonstration en même temps que la vidéo pour voir la différence avec absolute.
Un élément sticky se comporte normalement dans le flux, jusqu'à ce que le défilement l'amène au seuil indiqué (par exemple top: 0) : il colle alors au bord de l'écran, tant que son parent est visible.
header {
position: sticky;
top: 0; /* colle quand il atteint le haut de l'écran */
z-index: 10; /* reste au-dessus du contenu */
background-color: white; /* sinon le contenu se voit à travers */
}Trois causes classiques : 1. tu as oublié le seuil (top: 0) ; 2. un ancêtre a overflow: hidden ou overflow: auto ; 3. le parent n'est pas plus haut que l'élément : sticky ne colle que à l'intérieur de son parent.
La position sticky, la plus récente et la plus utilisée pour les en-têtes aujourd'hui.
Quand des éléments positionnés se chevauchent, z-index décide lequel est au-dessus : la valeur la plus grande passe devant.
z-index ne fonctionne que sur un élément positionné (ou un enfant de Flexbox/Grid) ;z-index égal (ou sans z-index), l'élément écrit en dernier dans le HTML passe devant ;z-index agit à l'intérieur de son contexte d'empilement : un enfant avec z-index: 9999 ne peut pas passer devant un élément qui est au-dessus de son parent.Plutôt que z-index: 99999, définis une petite échelle et respecte-la dans tout le projet : 1 contenu surélevé, 10 en-tête collant, 100 menu déroulant, 1000 fenêtre modale. Tu la stockeras dans des variables au chapitre 13.
L'auteur positionne une barre de navigation : c'est l'application directe de tout le chapitre. Code-la en même temps que lui.
Ajoute à ton CV un lien <a href="#" class="retour-haut">↑</a> toujours visible en bas à droite de l'écran, rond, de 48px, qui devient plus foncé au survol. Ajoute-lui un aria-label explicite dans le HTML.
Sur une carte produit, place un badge « Nouveau » dans le coin supérieur gauche, légèrement décalé à l'extérieur de la carte (−8px en haut et à gauche), avec un fond vert et un texte blanc.
Rends l'en-tête de ton CV collant en haut de l'écran, avec un fond blanc, une fine bordure en bas, et un z-index qui le garde au-dessus du contenu. Vérifie que les ancres du menu fonctionnent toujours. Que remarques-tu sur le titre de la section atteinte ?
Le chapitre « Position » de Dave Gray (anglais) : vingt minutes de révision sur le positionnement.