📍 Le cours : placer les éléments
Aujourd'hui, pour disposer les éléments d'une page on utilise Flexbox et Grid. La propriété position sert aux cas particuliers : badge accroché à un coin, menu déroulant, en-tête qui reste visible, fenêtre modale, bouton « retour en haut ». Pour bien l'utiliser, il faut d'abord comprendre le flux normal.
Le flux normal
Les éléments de bloc (div, p, h1…) s'empilent verticalement, chacun sur sa ligne ; les éléments en ligne (span, a, strong…) se suivent dans la ligne de texte et passent à la ligne quand il n'y a plus de place. La position de chaque élément dépend de ceux qui le précèdent. Un élément retiré du flux (absolute, fixed, float) ne laisse plus de place : les autres se resserrent.
position: relative
L'élément est décalé depuis sa place normale par top, right, bottom ou left, mais sa place d'origine reste réservée : les voisins ne bougent pas. Il sert surtout de repère pour des enfants positionnés en absolute.
.decale {
position: relative;
top: 10px; /* descend de 10px depuis sa place normale */
left: 20px; /* décalé de 20px vers la droite */
}
position: absolute
L'élément sort du flux et se place par rapport à son plus proche ancêtre positionné (c'est-à-dire dont position n'est pas static). S'il n'y en a aucun, il se place par rapport à la page entière. Le schéma classique est donc un parent relative et un enfant absolute. inset: 0 est un raccourci de top: 0; right: 0; bottom: 0; left: 0 : l'enfant remplit tout le parent.
.conteneur {
position: relative; /* le repère */
}
.voile {
position: absolute;
inset: 0; /* top, right, bottom, left : 0 */
background: rgb(0 0 0 / 50%);
}
position: fixed et sticky
Un élément fixed est placé par rapport à la fenêtre et reste là au défilement (bouton flottant, bandeau de cookies). Un élément sticky se comporte normalement jusqu'à atteindre le seuil donné par top, puis reste collé : c'est la bonne méthode pour un en-tête ou un sommaire qui suit la lecture.
.retour-haut {
position: fixed;
right: 1rem;
bottom: 1rem;
}
.sommaire {
position: sticky;
top: 1rem; /* se colle à 1rem du haut en défilant */
}
z-index : qui est au-dessus ?
Quand des éléments se chevauchent, le dernier dans le code passe devant, sauf si z-index en décide autrement : le plus grand nombre est au-dessus. z-index ne s'applique qu'aux éléments positionnés (et aux enfants d'un conteneur flex ou grid). Attention : certains éléments créent un contexte d'empilement (position avec z-index, opacity inférieure à 1, transform…), et à l'intérieur d'un tel contexte, un z-index élevé ne permet pas de passer devant un voisin du contexte parent. Si un z-index: 9999 ne suffit pas, cherche le parent qui crée le contexte.
Centrer un élément
| Besoin | Solution |
|---|
| centrer du texte ou des éléments en ligne | text-align: center; sur le parent |
| centrer un bloc de largeur connue | margin: 0 auto; (ou margin-inline: auto) |
| centrer dans les deux sens | Flexbox : display: flex; justify-content: center; align-items: center; sur le parent |
| même chose avec Grid | display: grid; place-items: center; sur le parent |
| centrer un élément positionné (fenêtre modale) | top: 50%; left: 50%; transform: translate(-50%, -50%); |
float : à connaître, pas à utiliser pour la mise en page
float retire un élément du flux et le pousse à gauche ou à droite en faisant contourner son texte : son seul usage actuel est d'insérer une image dans un paragraphe. Dans les années 2000, on s'en servait pour faire des colonnes ; Flexbox et Grid ont remplacé cette technique. Un parent qui ne contient que des éléments flottants s'effondre (hauteur nulle) : overflow: auto ou display: flow-root sur le parent règle le problème.
Déboguer une mise en page
- Ouvre les outils de développement (
F12) et inspecte l'élément : le panneau montre sa boîte, sa position et les règles qui s'appliquent.
- Dessine tous les contours pour voir les boîtes :
* { outline: 1px solid red; } (à retirer ensuite).
- Teste un changement à la fois, directement dans le panneau de styles.
