Distinguer les éléments en bloc et en ligne, déplacer un élément avec position relative, absolute, fixed et sticky, faire flotter une image, et aligner des éléments en ligne ou en colonne avec Flexbox.
Le site d'une agence de location de voitures à Agadir doit afficher trois offres côte à côte, un badge « Promo » collé dans le coin d'une carte, et un menu qui reste en haut de l'écran quand on descend. Par défaut, les blocs s'empilent les uns sous les autres. Pour les placer où l'on veut, il faut les outils de positionnement.
Par défaut, les trois cartes sont des blocs : elles s'empilent les unes sous les autres.
div, p, h1, section) commence sur une nouvelle ligne et prend toute la largeur.span, a, strong, img) reste dans le texte et ne prend que sa place.display change ce comportement : block, inline, inline-block, none (caché), flex, grid.| Valeur | Comportement |
|---|---|
static | par défaut, dans le flux normal |
relative | décalé par rapport à sa place normale, et sert de repère à ses enfants absolus |
absolute | sorti du flux, placé par top, right, bottom, left dans son repère |
fixed | fixé à l’écran, ne bouge pas quand on défile |
sticky | défile normalement puis reste collé (top: 0) |
z-index décide qui passe au-dessus quand deux éléments se superposent.
float: left ou right fait flotter une image : le texte l’entoure, comme dans un journal. On l’utilise encore pour cela, mais plus pour faire des mises en page en colonnes.
.article img { float: left; margin: 0 12px 8px 0; width: 150px; }
On déclare un conteneur flexible ; ses enfants directs se placent sur un axe.
.offres {
display: flex;
flex-direction: row; /* row (ligne) ou column (colonne) */
justify-content: space-between; /* axe principal : flex-start, center, space-between, space-around */
align-items: center; /* axe secondaire : stretch, flex-start, center, flex-end */
flex-wrap: wrap; /* retour à la ligne si besoin */
gap: 16px;
}
.carte { flex: 1; } /* chaque carte prend une part égale */
Flexbox est l’outil le plus utilisé aujourd’hui pour les menus, les rangées de cartes et le centrage.
Flexbox, c'est le gardien du parking : vous lui dites « garez-les en ligne », « laissez le même espace entre chacune », « centrez-les ». Il place les voitures sans que vous calculiez chaque position.
.offres { display: flex; justify-content: space-between; /* répartition sur la ligne */ align-items: center; /* alignement vertical */ gap: 16px; /* espace entre les cartes */ }
Le badge « Promo » est collé à un endroit précis de la carte, quoi qu'il arrive au reste. La carte est le repère (position: relative), le badge est collé dessus (position: absolute).
.carte { position: relative; } .badge { position: absolute; top: 8px; right: 8px; }
Écrivez le CSS qui centre un message horizontalement et verticalement dans une bannière de 300px de haut.
.banniere { height: 300px; display: flex; justify-content: center; /* axe principal (horizontal) */ align-items: center; /* axe secondaire (vertical) */ }
Quelle valeur de position utiliser pour (1) un bouton WhatsApp toujours en bas à droite de l'écran ; (2) un menu qui défile avec la page puis reste collé en haut ?
/* 1 */ .whatsapp { position: fixed; bottom: 16px; right: 16px; } /* 2 */ nav { position: sticky; top: 0; }
Sur mobile, les cartes de .offres doivent s'afficher les unes sous les autres, toujours avec Flexbox. Quelle propriété changer ? Et pour qu'elles passent à la ligne quand il n'y a plus de place ?
.offres { flex-direction: column; } /* en colonne */ /* ou bien, pour un retour à la ligne automatique : */ .offres { flex-wrap: wrap; }