Maîtrise les propriétés CSS display et position pour contrôler comment les éléments sont rendus et placés sur la page, des mises en page en bloc aux superpositions précisément positionnées.
Chaque élément HTML a une valeur display par défaut qui détermine comment il participe à la mise en page. Comprendre display est fondamental pour contrôler tes mises en page.
Les valeurs display les plus courantes sont :
block — L'élément prend toute la largeur disponible et commence sur une nouvelle ligne. Exemples : <div>, <p>, <h1>.inline — L'élément prend uniquement la largeur nécessaire à son contenu et ne commence pas sur une nouvelle ligne. Exemples : <span>, <a>, <strong>. Tu ne peux pas définir width ou height sur des éléments inline.inline-block — Un hybride : l'élément s'écoule en ligne comme du texte, mais tu peux définir width, height, margin et padding sur tous les côtés.none — L'élément est complètement retiré de la mise en page. Il ne prend aucun espace et est invisible..card {
display: inline-block;
width: 200px;
height: 150px;
}
.hidden {
display: none;
}Choisir la bonne valeur display est la première étape dans toute tâche de mise en page.
/* static — la valeur par défaut ; l'élément suit le flux normal */
.default {
position: static;
}
/* relative — décalé par rapport à sa position normale ;
l'espace original est préservé */
.nudged {
position: relative;
top: 10px;
left: 20px;
}
/* absolute — retiré du flux normal ;
positionné par rapport à l'ancêtre positionné le plus proche */
.overlay {
position: absolute;
top: 0;
right: 0;
}
/* fixed — retiré du flux normal ;
positionné par rapport au viewport (reste au défilement) */
.sticky-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* sticky — bascule entre relative et fixed
selon la position de défilement */
.table-header {
position: sticky;
top: 0;
}Quand tu utilises position: absolute, l'élément est positionné par rapport à son ancêtre positionné le plus proche — c'est-à-dire l'élément parent le plus proche qui a une valeur position autre que static.
Si aucun ancêtre n'est positionné, l'élément est positionné par rapport au bloc conteneur initial (généralement l'élément <html>).
Un motif très courant consiste à définir position: relative sur un conteneur parent (sans aucun décalage) puis à utiliser position: absolute sur un enfant pour le placer précisément dans ce conteneur :
.parent {
position: relative; /* établit le contexte de positionnement */
}
.badge {
position: absolute;
top: -8px;
right: -8px;
}Les propriétés de décalage top, right, bottom et left ne fonctionnent que sur les éléments qui ont une valeur position autre que static. Elles contrôlent la distance par rapport au bord correspondant du contexte de positionnement.
Que se passe-t-il quand tu définis `position: absolute` sur un élément dont le parent n'a pas de position explicite ?