Module 5 — Mise en page : les bases

📘 Module 5 — Mise en page : les bases

La nuit était tombée sur la page web. Les éléments HTML étaient là, empilés sans logique, chacun jouant sa propre partition. Mon boulot ? Comprendre comment ils s’affichent, où ils se placent, et qui passe devant qui.

Dans ce chapitre, on enquête sur les mécanismes fondamentaux de la mise en page CSS : display, position, z-index… et quelques vieilles affaires classées : les floats.

5.1. display — Le comportement des suspects

display décide comment un élément se comporte dans le flux. C’est lui qui dit : « Tu prends toute la place » ou « Tu restes discret ».

▶ display: block — Le dur à cuire

Il occupe tout l’espace. Il impose sa présence. Personne ne passe à côté.

• Prend toute la largeur disponible
• Passe automatiquement à la ligne
• Accepte width, height, margin, padding

Éléments typiques : <div>, <p>, <h1>

div {
  display: block;
}

▶ display: inline — Le type discret

Il se faufile entre les mots. Ne dérange personne.

• Occupe uniquement l’espace de son contenu
• Ne va pas à la ligne
• Ignore width et height
• Marges verticales peu fiables

Éléments courants : <span>, <a>, <strong>

span {
  display: inline;
}

▶ display: inline-block — L’entre-deux louche

Il reste dans la ligne… mais il accepte qu’on le mesure.

• Reste sur la même ligne
• Accepte dimensions et espacements
• Longtemps utilisé avant Flexbox

button {
  display: inline-block;
}

5.2. position — Sortir du flux ou rester dans le rang

Quand un élément ne respecte plus les règles, c’est souvent position qui est derrière le coup.

▶ position: static — Le citoyen modèle

• Position normale
• Impossible à déplacer avec top, left, right, bottom

C’est le comportement par défaut. Pas de vagues.

▶ position: relative — Le faux calme

Il reste dans le flux… mais il peut se déplacer légèrement.

Souvent utilisé comme référence pour un enfant en absolute.

.box {
  position: relative;
  top: 10px;
}

▶ position: absolute — Le hors-la-loi

• Sort du flux
• Se positionne par rapport au premier parent positionné

.child {
  position: absolute;
  top: 0;
  right: 0;
}

⚠️ Aucun parent positionné ? Il se cale directement sur le viewport. Mauvaise fréquentation.

▶ position: fixed — L’ombre qui suit

• Fixé à la fenêtre
• Ne bouge jamais, même quand ça défile

Parfait pour une navbar qui surveille tout.

nav {
  position: fixed;
  top: 0;
  width: 100%;
}

▶ position: sticky — Le collant

• D’abord sage
• Puis il s’accroche quand on atteint une position donnée

h1 {
  position: sticky;
  top: 20px;
}

Très utilisé pour les titres, menus, repères visuels.

5.3. z-index — Qui passe devant qui

Dans cette ville, tout le monde veut être au-dessus des autres. z-index décide de l’ordre d’empilement.

▶ z-index

⚠️ Ne fonctionne que sur des éléments positionnés.

.box {
  position: relative;
  z-index: 10;
}

Plus le nombre est élevé, plus l’élément passe devant… mais seulement dans son contexte.

▶ Le contexte d’empilement — Les juridictions parallèles

Un nouveau contexte est créé quand :

• position + z-index
• opacity < 1
• transform
• filter, perspective
• isolation: isolate

Chaque contexte est indépendant.

Même avec un z-index plus élevé, un élément ne franchira pas les frontières de son contexte.

5.4. float et clearfix — Les vieilles affaires

Avant Flexbox et Grid, les layouts se faisaient à coups de float.

▶ float

img {
  float: right;
}

Le problème ? Les éléments flottants sortent du flux. Le parent s’effondre. Le chaos.

▶ clearfix — Le nettoyage après coup

.container::after {
  content: "";
  display: block;
  clear: both;
}

▶ Aujourd’hui

✔ Utile pour comprendre du vieux code ✔ Encore présent dans des CMS et thèmes anciens ❌ Plus utilisé pour créer des layouts modernes

Flexbox et Grid ont repris le contrôle.

🧾 Conclusion

La mise en page CSS, c’est une affaire de règles, de hiérarchies et de flux. Comprendre display, position et z-index, c’est savoir pourquoi une page se comporte mal… et comment la remettre dans le droit chemin.