Affichage et positionnement

1Le flux normal

Même sans CSS, le navigateur place les éléments selon le flux normal : les éléments block (div, p, h1, section, nav) s’empilent verticalement et occupent la largeur disponible. Les éléments inline (a, span, strong, img) restent sur la même ligne et passent à la suivante si besoin.

2display

La propriété display détermine le type de boîte d’un élément et la façon dont ses enfants sont organisés.

display: none vs visibility: hidden vs opacity: 0

3Le modèle de boîte

Chaque élément est une boîte avec quatre couches, de l’intérieur vers l’extérieur : content, padding (espace intérieur), border, puis margin (espace extérieur).

Pensez à box-sizing: border-box

Par défaut, une largeur de 300px et un padding de 20px de chaque côté donnent une boîte de 340px, ce qui provoque souvent des débordements. Avec border-box, les bordures et le padding font partie de la largeur déclarée.

*, *::before, *::after { box-sizing: border-box; }

Raccourcis de margin

margin: 10px;              /* all four sides */
margin: 10px 20px;         /* vertical | horizontal */
margin: 10px 20px 30px;    /* top | horizontal | bottom */
margin: 10px 20px 30px 40px; /* top right bottom left (clockwise) */
margin: 0 auto;            /* centers a block that has a width */
margin-left: auto;         /* pushes an element to the far right */

4position

La propriété position définit si un élément reste dans le flux normal. Les propriétés top, right, bottom et left servent ensuite à le déplacer ou le fixer.

Essayez

Passez le parent en static : le bloc se positionne par rapport à la page extérieure. Choisissez relative : les éléments voisins restent à leur place. En absolute, ils comblent l’espace laissé libre.

Raccourcis de positionnement

inset: 0;                 /* top, right, bottom, left all 0: stretch to fill the parent */
position: absolute; top: 0; right: 0;     /* pin to top-right corner */
position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; /* centered */

fixed

.chat-button { position: fixed; right: 20px; bottom: 20px; }

L’élément reste visible pendant le défilement. Attention : certaines propriétés d’un parent, comme transform, filter ou perspective, peuvent modifier son repère.

sticky

Un élément sticky a besoin d’un seuil (comme top: 0) et de suffisamment d’espace pour se déplacer. Faites défiler la boîte ci-dessous.

header { position: sticky; top: 0; z-index: 10; background: #fff; }

5z-index et superposition

z-index détermine quel élément recouvre les autres. Une valeur supérieure passe devant, mais seulement pour les éléments positionnés ou les enfants de Flexbox/Grid.

/* a simple scale that avoids chaos */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;

6Flexbox

Flexbox organise les éléments dans une direction : navigation, groupes de boutons ou cartes côte à côte. Appliquez display: flex au parent pour transformer ses enfants en éléments flexibles.

.row { display: flex; gap: 16px; }

Il existe deux axes : l’axe principal suit la direction des éléments, et l’axe transversal lui est perpendiculaire. justify-content agit sur l’axe principal, align-items sur l’autre. Avec flex-direction: column, ils s’inversent.

Essayez

Propriétés du conteneur

Propriétés des éléments enfants

7Grid

Grid sert aux mises en page qui utilisent lignes et colonnes ensemble : galeries, tableaux de bord et formulaires. Appliquez display: grid au parent et définissez les colonnes.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;   /* three columns, middle twice as wide */
  gap: 16px;
}
.wide { grid-column: 1 / 3; }           /* from line 1 to line 3 = 2 columns */

Cartes responsive sans media query

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

Chaque carte mesure au moins 240px, et le navigateur en place autant que possible sur chaque ligne.

Mise en page avec zones nommées

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: footer; }

8Centrer des éléments

/* 1. Center anything, horizontally and vertically (best default) */
.parent { display: grid; place-items: center; }

/* 2. Same with flex */
.parent { display: flex; justify-content: center; align-items: center; }

/* 3. Center a block horizontally only */
.box { width: 600px; max-width: 100%; margin: 0 auto; }

/* 4. Center text */
.text { text-align: center; }

/* 5. Center an absolutely positioned element */
.box { position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; }

/* 6. Center on the full screen */
.parent { min-height: 100vh; display: grid; place-items: center; }

9Comment faire pour… ?

<nav class="nav"><a class="logo">DECT</a><ul class="links">…</ul></nav>

.nav   { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; }
.links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }

.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav .cta { justify-self: end; }

.nav { position: sticky; top: 0; z-index: 100; background: #fff; }

.links { display: flex; gap: 16px; }
.links .login { margin-left: auto; }

.card  { position: relative; padding: 24px; }
.close { position: absolute; top: 12px; right: 12px; }

.icon  { position: relative; display: inline-block; }
.badge { position: absolute; top: -6px; right: -6px; }

.fab { position: fixed; right: 20px; bottom: 20px; z-index: 50; }

.item     { position: relative; }
.dropdown { position: absolute; top: 100%; left: 0; display: none; min-width: 180px; z-index: 100; }
.item:hover .dropdown { display: block; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; z-index: 300; }
.modal   { background: #fff; padding: 24px; width: min(480px, 92vw); border-radius: 8px; }

body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
main { flex: 1; }   /* takes all leftover space, footer is pushed down */

.layout  { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.sidebar { position: sticky; top: 16px; align-self: start; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card  { display: flex; flex-direction: column; }
.card .btn { margin-top: auto; }

.actions { display: flex; gap: 12px; }

.hero { min-height: 100vh; display: grid; place-items: center; text-align: center; }

.row { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .row { flex-direction: row; } .row > * { flex: 1; } }

.burger { display: none; }
@media (max-width: 767px) { .links { display: none; } .burger { display: block; } }

.hero { position: relative; }
.hero img { width: 100%; display: block; }
.hero .text { position: absolute; left: 24px; bottom: 24px; color: #fff; }

10Problèmes fréquents

Méthode de débogage

/* 1. Show every box */
* { outline: 1px solid rgba(255,0,0,.4); }

/* 2. In the browser: right-click → Inspect → hover the element
      The colors show margin, border, padding and content.
   3. Check the "Computed" tab for the real display and position. */

11Unités et dimensions

width: min(1100px, 92%);               /* never wider than 1100px, never touching the edges */
font-size: clamp(1rem, 2.5vw, 1.5rem); /* min | preferred | max */
.container { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
img { max-width: 100%; height: auto; }  /* images never overflow */

12Aide-mémoire