Positionnement CSS

Imagine que tu construis l'intérieur d'une pyramide égyptienne. Chaque décoration, chaque hiéroglyphe et chaque statue doit se trouver à un emplacement précisément planifié. C'est exactement à cela que sert le positionnement en CSS - il nous donne un contrôle total sur l'endroit où nos éléments apparaissent sur la page.

La propriété position

La propriété position en CSS détermine comment un élément est placé sur la page. Elle a cinq valeurs principales, chacune se comportant différemment.

position: static (par défaut)

Chaque élément HTML a par défaut position: static. Cela signifie que l'élément s'affiche dans le flux normal du document - l'un sous l'autre (blocs) ou l'un à côté de l'autre (inline). Les propriétés top, left, right et bottom ne fonctionnent pas sur les éléments static.

1.element {
2  position: static; /* valeur par défaut */
3}

C'est comme des pierres posées naturellement dans une pyramide - chacune est à sa place, suivant l'ordre de construction.

position: relative

Un élément avec position: relative reste dans le flux normal du document, mais tu peux le décaler par rapport à sa position d'origine à l'aide de top, left, right et bottom. Important - l'espace que l'élément occupait est préservé.

1.hieroglyph {
2  position: relative;
3  top: 20px;    /* décale vers le bas de 20px */
4  left: 30px;   /* décale vers la droite de 30px */
5}

Imagine un hiéroglyphe gravé sur un mur que nous décalons légèrement - sa « place » dans la rangée des autres hiéroglyphes existe toujours, mais le symbole lui-même est légèrement décalé.

position: absolute

Un élément avec position: absolute est retiré du flux normal du document. Il se positionne par rapport à l'ancêtre le plus proche ayant une position autre que static (c'est-à-dire relative, absolute, fixed ou sticky). Si aucun tel ancêtre n'existe - il se positionne par rapport au bloc conteneur initial (une zone de la taille de la fenêtre).

1.pyramid-container {
2  position: relative; /* contexte de positionnement */
3  width: 500px;
4  height: 400px;
5}
6
7.treasure {
8  position: absolute;
9  top: 50px;
10  right: 30px;
11}

C'est comme placer un trésor à un endroit précis dans une chambre de pyramide. Le trésor n'affecte pas les positions des autres objets - il repose simplement là où tu l'as mis.

position: fixed

Un élément avec position: fixed est positionné par rapport à la fenêtre du navigateur (viewport). Il reste à sa place même lorsque tu fais défiler la page.

1.navigation {
2  position: fixed;
3  top: 0;
4  left: 0;
5  width: 100%;
6  background-color: #2C1810;
7  z-index: 100;
8}

Imagine-le comme une étoile dans le ciel égyptien - où que tu marches dans le désert, l'étoile est toujours au même endroit dans le firmament. De même, un élément fixed est toujours visible au même point sur l'écran.

position: sticky

Un élément sticky est un hybride entre relative et fixed. Il se comporte comme relative jusqu'à ce que l'utilisateur fasse défiler la page jusqu'à un certain point - alors il « colle » et se comporte comme fixed.

1.section-header {
2  position: sticky;
3  top: 0;
4  background-color: #FFD700;
5  padding: 10px;
6}

C'est comme un garde surveillant l'entrée de la chambre du pharaon. Il se tient à sa place, mais quand tu t'approches du seuil, il bloque le passage et ne bouge plus.

z-index et contexte d'empilement

Lorsque des éléments se chevauchent (ce qui arrive avec le positionnement absolute, relative, fixed et sticky), la propriété z-index détermine leur ordre.

1.background-layer { position: absolute; z-index: 1; }
2.middle-layer { position: absolute; z-index: 2; }
3.front-layer { position: absolute; z-index: 3; }

Imagine une peinture murale égyptienne composée de couches : d'abord le fond du désert (z-index: 1), puis les pyramides (z-index: 2), et au-dessus les figures des pharaons (z-index: 3). Plus le z-index est élevé, plus l'élément est proche du spectateur (au-dessus).

Règles importantes du z-index :

• Ne fonctionne que sur les éléments avec une position autre que static (ainsi que sur les éléments flex et grid, que tu découvriras dans les modules suivants)
• Les éléments sans z-index ont une valeur par défaut de auto (équivalent à 0)
• Un z-index plus élevé signifie un affichage « au-dessus » des autres éléments
• Les éléments avec le même z-index s'affichent dans l'ordre où ils apparaissent dans le HTML

La propriété overflow

Lorsque le contenu d'un élément est plus grand que l'élément lui-même, la propriété overflow contrôle ce qui lui arrive.

1.scroll-container { width: 300px; height: 200px; overflow: hidden; }
2.scroll-container-visible { overflow: scroll; }
3.scroll-container-auto { overflow: auto; }

• overflow: hidden - cache le contenu qui dépasse l'élément (comme un mur de pyramide derrière lequel l'intérieur n'est pas visible)
• overflow: scroll - affiche toujours les barres de défilement
• overflow: auto - les barres de défilement n'apparaissent que lorsque le contenu est plus grand que le conteneur

Float et Clearfix (contexte historique)

Avant l'ère de Flexbox et Grid, la propriété float était utilisée pour créer des dispositions en colonnes. Bien que cette approche soit dépassée aujourd'hui, il est utile de la connaître car tu la rencontreras dans du code plus ancien.

1.column-left { float: left; width: 50%; }
2.column-right { float: right; width: 50%; }
3
4/* Clearfix - corrige le problème du float */
5.container::after { content: ""; display: table; clear: both; }

float retire un élément du flux normal et le « fait flotter » du côté gauche ou droit du conteneur. Le problème est que le conteneur parent « oublie » les dimensions des enfants en float - c'est pourquoi le clearfix est nécessaire.

Aujourd'hui, au lieu de float, nous utilisons display: flex ou display: grid, qui sont beaucoup plus simples et plus prévisibles. Le float reste surtout utile pour faire entourer une image par du texte.

Résumé

Mohamed dit : « Tout comme les bâtisseurs de pyramides devaient planifier précisément le placement de chaque pierre, tu dois comprendre le positionnement CSS. Avec position et z-index, tu peux placer les éléments exactement où tu le souhaites - comme un architecte du temple de Karnak ! »

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Positionnement CSS - Pyramide</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Le positionnement CSS en Égypte</h1>
11
12    <h2>1. position: relative</h2>
13    <div class="demo-box">
14        <div class="stone">Normal</div>
15        <div class="stone moved">Déplacé (relative)</div>
16        <div class="stone">Normal</div>
17    </div>
18
19    <h2>2. position: absolute</h2>
20    <div class="pyramid-room">
21        <div class="treasure treasure-1">Trésor 1</div>
22        <div class="treasure treasure-2">Trésor 2</div>
23        <div class="treasure treasure-3">Trésor 3</div>
24    </div>
25
26    <h2>3. z-index - calques de la peinture</h2>
27    <div class="painting">
28        <div class="layer layer-bg">Arrière-plan (z-index: 1)</div>
29        <div class="layer layer-mid">Pyramides (z-index: 2)</div>
30        <div class="layer layer-front">Pharaon (z-index: 3)</div>
31    </div>
32
33    <h2>4. overflow</h2>
34    <div class="scroll-demo">
35        <p>Ce texte est trop long pour son conteneur. Overflow: auto ajoute une barre de défilement quand le contenu ne tient pas dans l'élément. Les anciens Égyptiens écrivaient de longs textes sur des rouleaux de papyrus - le CSS nous permet de faire défiler le contenu de façon similaire !</p>
36    </div>
37</body>
38</html>