Phase 3 — Mise en page
#9 Affichage et positionnement
display, position, z-index, float
La propriété display
La propriété display contrôle comment un élément participe à la mise en page :
Valeurs de display
/* Block : prend toute la largeur, nouvelle ligne */
div, p, h1, section { display: block; }
/* Inline : suit le flux du texte */
span, a, strong { display: inline; }
/* Inline-block : inline + largeur/hauteur */
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
}
/* None : complètement caché */
.cache { display: none; }Le positionnement
Valeurs de position
/* Relative : décalé de sa position normale */
.tooltip-trigger {
position: relative;
}
/* Absolute : positionné par rapport à l'ancêtre positionné */
.tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
/* Fixed : reste en place pendant le scroll */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
/* Sticky : colle quand on scrolle */
.table-header {
position: sticky;
top: 0;
background: white;
}Contexte d'empilement (z-index)
z-index
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 50;
}
.modal {
position: fixed;
z-index: 51; /* Au-dessus de l'overlay */
}À vous de jouer
Essayez les commandes ci-dessous :
terminal — browser