Positionnement · Cours CSS | Apprendre à coder

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.

Prédisez avant de lire

Avant de dérouler : on met z-index: 9999 sur un élément pour le faire passer au premier plan, mais il reste derrière un autre élément. Quelle condition a-t-on probablement oubliée pour que le z-index fasse effet ?

Voir la réponse

z-index n'a aucun effet sur un élément en position: static (la valeur par défaut). Il ne s'applique qu'aux éléments positionnés : position: relative, absolute, fixed ou sticky. Un z-index: 9999 est donc ignoré tant que l'élément n'a pas reçu une de ces positions. Deuxième piège : le z-index ne joue qu'à l'intérieur du même contexte d'empilement ; un enfant ne peut pas passer devant un élément d'un autre contexte créé par son parent (par exemple un parent avec opacity < 1 ou transform). La parade : donner une position à l'élément concerné et vérifier qu'aucun parent ne crée un contexte d'empilement qui l'enferme.

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.

Predict before reading

Before you scroll down: you set z-index: 9999 on an element to bring it to the front, but it still stays behind another element. What condition did you most likely forget for z-index to take effect?

See the answer

z-index has no effect on an element with position: static (the default value). It only applies to positioned elements: position: relative, absolute, fixed or sticky. So even a z-index: 9999 is ignored as long as the element hasn't been given one of those positions. A second common trap: z-index only works within the same stacking context; a child cannot appear in front of an element belonging to a different context created by its parent (for example a parent with opacity < 1 or transform). The fix: give a position to the element in question and check that no ancestor creates a stacking context that traps it.

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

🎯 Pratique

S'entraîner (clique pour ouvrir) :

✨ Prompt IA

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

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

⚖️ Juge le code de l'IA

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

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

Prochaine étape

Vous savez positionner un élément précis. Mais aligner toute une rangée de boutons ou centrer un menu reste pénible avec ces seuls outils. Dans la prochaine leçon, on découvre Flexbox, la méthode moderne pour aligner et répartir des éléments sur une ligne sans se battre.

Leçon 5 : Flexbox →