Positioning — CSS course

La propriété display

Chaque élément HTML a un mode d'affichage par défaut :

block : prend toute la largeur, retour à la ligne (div, p, h1)
inline : prend seulement la largeur du contenu, pas de retour à la ligne (span, a, strong)
inline-block : comme inline mais on peut définir width/height
none : l'élément disparaît complètement de la page

On peut changer le display de n'importe quel élément. Par exemple, transformer des <li> en inline-block pour créer un menu horizontal.

La propriété position

static : par défaut, l'élément suit le flux normal de la page
relative : décalé par rapport à sa position normale (le flux est conservé)
absolute : retiré du flux, positionné par rapport au parent le plus proche qui a position: relative
fixed : fixé par rapport à la fenêtre (reste en place au scroll)
sticky : se comporte comme relative puis fixed au scroll

Les propriétés top, right, bottom, left n'ont d'effet que sur les éléments positionnés (pas static).

À gauche : relative garde sa place (le flux est conservé). À droite : absolute sort du flux et se cale sur le parent positionné.

z-index : l'ordre de superposition

Quand des éléments se superposent, z-index définit l'ordre d'empilement. Un z-index plus élevé passe devant.

Attention : z-index ne fonctionne que sur les éléments positionnés (relative, absolute, fixed, sticky). Sur un élément static, il est ignoré.

Le z-index le plus élevé passe devant.

Techniques de centrage

Centrer du texte : text-align: center
Centrer un bloc : margin: 0 auto (l'élément doit avoir une width)
Centrer verticalement et horizontalement : on verra Flexbox dans la leçon suivante : c'est la méthode moderne

The display property

Every HTML element has a default display mode:

block — takes the full width, line break (div, p, h1)
inline — takes only content width, no line break (span, a, strong)
inline-block — like inline but you can set width/height
none — the element disappears completely from the page

You can change any element's display. For example, turning <li> items into inline-block to create a horizontal menu.

The position property

static — default, element follows the normal page flow
relative — offset from its normal position (flow preserved)
absolute — removed from flow, positioned relative to the closest parent with position: relative
fixed — fixed relative to the viewport (stays in place when scrolling)
sticky — behaves like relative then fixed when scrolling

The properties top, right, bottom, left only work on positioned elements (not static).

Left: relative keeps its place (flow preserved). Right: absolute leaves the flow and snaps to the positioned parent.

z-index: stacking order

When elements overlap, z-index defines the stacking order. A higher z-index goes in front.

Warning: z-index only works on positioned elements (relative, absolute, fixed, sticky). On a static element, it's ignored.

The highest z-index appears in front.

Centering techniques

Center text: text-align: center
Center a block: margin: 0 auto (the element must have a width)
Center vertically and horizontally: we'll see Flexbox in the next lesson — it's the modern method

Essayez vous-même

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Montre-moi 5 exemples pratiques de position CSS (static, relative, absolute, fixed, sticky) avec un cas d'utilisation réel pour chacun.

Ré-explique sans regarder

Sans relire la réponse de l'IA : avec tes mots, quelle est la différence entre position: relative et position: absolute, et par rapport à quoi un élément absolute se positionne-t-il ?

Une bonne explication dit : relative décale l'élément par rapport à sa position d'origine mais garde sa place dans le flux (les voisins ne bougent pas). absolute retire l'élément du flux et le cale sur le parent positionné le plus proche (un ancêtre en relative, absolute ou fixed) ; s'il n'y en a aucun, il se cale sur le body. Réflexe pro : mettre position: relative sur le parent pour ancrer un enfant absolute à l'intérieur.

Exercice : Corrigez le code de l'IA

L'IA a utilisé position: absolute sur un badge sans mettre position: relative sur le parent. Le badge est positionné par rapport à la page entière au lieu de la carte. Corrigez !

Corrigez le code

Accepter ou rejeter le code de l'IA

Tu as demandé à l'IA de centrer une boîte dans la page. Voici sa proposition. Ton rôle de relecteur : l'accepter telle quelle ou la rejeter, et dire pourquoi.

.box {
  position: absolute;
  left: 35%;
  width: 400px;
}

À rejeter. Ce n'est pas un vrai centrage : left: 35% est un nombre magique calé à l'œil pour une largeur de 400px et une fenêtre précise ; change la taille de l'écran ou de la boîte et tout se décale. En plus, position: absolute sort la boîte du flux, ce qui peut chevaucher le reste de la page. Pour centrer un bloc de largeur fixe, le réflexe est margin: 0 auto (qui répartit l'espace restant à gauche et à droite, quelle que soit la fenêtre).

Rappel libre

Sans remonter dans la leçon : cite les cinq valeurs de position, et explique pourquoi z-index et top n'ont aucun effet sur un élément static.

Les cinq valeurs : static (par défaut), relative, absolute, fixed et sticky. z-index, top, right, bottom et left n'agissent que sur les éléments positionnés, c'est-à-dire tout sauf static. Un élément static suit simplement le flux normal : il n'a pas de point d'ancrage à décaler, donc ces propriétés sont ignorées.

Quelle valeur de display prend toute la largeur disponible ?

inline block inline-block

Un élément position: absolute se positionne par rapport à :

La fenêtre du navigateur Son parent direct Le parent positionné le plus proche (relative, absolute, fixed)

Comment centrer horizontalement un bloc de 400px ?

text-align: center margin: 0 auto position: center

Next step

You can position a single element precisely. But aligning a whole row of buttons or centering a menu is still painful with those tools alone. In the next lesson we discover Flexbox, the modern way to align and distribute items along a line without a fight.

Lesson 5: Flexbox →