Apprendre CSS : Positionnement

Comprendre le positionnement

Positionnement ≠ Placement

Avant toute chose, il est important de distinguer le placement d’un élément de son positionnement.

• Placement avec display : le placement d’un élément spécifie le type de boîte utilisée pour l’affichage de nos éléments. Les boîtes sont par défaut placées en tant qu’éléments block ou inline. Avec les valeurs grid ou flex, on peut déplacer nos éléments de manière très précise.
• Positionnement avec position : la position détermine de quelle manière un élément est positionné par rapport à la page web ou à son conteneur parent.

Flux de la page

Avant de détailler les propriétés de positionnement d’un élément sur une page web, il faut bien comprendre la notion de flux d’une page.

Tout élément inséré dans un document HTML appartient au flux du document. En d’autres termes, les éléments apparaissent sur la page en fonction de leur ordre d’écriture dans le code.

<h1>Démo</h1>
<p>Lorem ipsum dolor sit amet...</p>
<a href="#">Lien</a>

Dans l’exemple précédent, il paraît évident que le titre <h1> sera situé avant le paragraphe <p>, lui-même situé avant le lien <a>.

Ce comportement est engendré par le fait que, par défaut, tous les éléments contenus dans une page web ont une position dite static. Il va néanmoins pouvoir être possible de faire sortir un élément du flux de la page en lui définissant une position différente.

Positions

Les positions CSS sont définies à travers la propriété position.

En dehors de static, on distingue 4 autres types de positions CSS : relative, absolute, fixed et sticky. Certaines vont laisser les éléments dans le flux de la page et d’autres vont les en extraire.

Tous les éléments positionnés avec une des ces 4 valeurs vont pouvoir être déplacés via les propriétés CSS top, bottom, left et right. Leur comportement varie selon le contexte de positionnement :

Relative

Un élément avec position: relative est positionné dans le flux normal du document. Ainsi, un espace est créé sur la page afin de contenir l’élément.

Il agira en tant que référentiel de positionnement pour un autre élément positionné (avec relative, absolute, fixed ou sticky).

Il pourra être déplacé avec top, bottom, left et right. L’élément positionné doit se décaler du bord indiqué par rapport à sa position initiale.

<div class="relative">Item</div>

.relative {
	position: relative;
	left: 10px;
	top: 50px;
}

Absolute

Un élément avec position: absolute est retiré du flux normal du document. Ainsi, aucun espace n’est créé sur la page pour contenir l’élément.

Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné (= position autre que static).

Il pourra être déplacé avec top, bottom, left et right. L’élément positionné doit se décaler du bord indiqué par rapport au bloc positionné servant de référentiel.

<div class="relative">
	<div class="absolute">Item</div>
</div>

.relative {
	position: relative;
	top: 50px;
	left: 50px;
	width: 300px;
}

.absolute {
	position: absolute;
	bottom: 25px;
	right: 25px;
	width: 150px;
}

Fixed

Un élément avec position: fixed est retiré du flux normal du document. Ainsi, aucun espace n’est créé sur la page pour contenir l’élément.

Il est ensuite positionné par rapport à la fenêtre (viewport), ce qui signifie qu’il reste toujours au même endroit, même si la page défile.

Il pourra être déplacé avec top, bottom, left et right par rapport à la fenêtre.

<div class="fixed">Item</div>

.fixed {
	position: fixed;
	bottom: 25px;
	right: 25px;
}

Sticky

Un élément défini avec position: sticky est positionné dans le flux normal du document. Ainsi, un espace est créé sur la page afin de contenir l’élément.

Sa position bascule entre relative et fixed en fonction de la position de défilement de l’utilisateur.

top, bottom, left et right permettent de définir la valeur seuil à partir de laquelle l’élément devra se fixer à l’écran (on dit qu’il « colle » à l’écran).

<div class="sticky">Item</div>

body {
	height: 2000px;
	padding-top: 200px;
}

.sticky {
	position: sticky;
	top: 10px;
}

Ici, mon élément sticky est initialement relative et situé à 200px du haut de la page. Au scroll, lorsque l’élément sticky arrive à 10px du top, alors il va venir s’attacher à la page en fixed.

Empilement

Hormis la position static, les 4 autres valeurs créent un contexte d’empilement. Cela permet de spécifier à quel plan doit être placé un élément avec la propriété z-index.

Sans aucune valeur z-index, les éléments s’empilent dans l’ordre dans lequel ils apparaissent dans le HTML :

• Au même niveau hiérarchique, le plus bas apparaît au premier plan
• Un élément imbriqué dans un autre se verra sur un plan supérieur

Pour modifier manuellement ce plan, on pourra définir pour z-index une valeur entière. Si deux éléments se chevauchent, plus la valeur d’un élément sera élevée, plus ce dernier sera situé au premier plan.

Notez que les éléments positionnés (relative, absolute, fixed et sticky) apparaîtront par défaut toujours au-dessus des éléments static.

<div class="item relative">
	<div class="item absolute"></div>
</div>

.relative {
	position: relative;
	top: 25px;
	left: 25px;
	width: 200px;
	height: 200px;
}

.absolute {
	position: absolute;
	right: -100px;
	bottom: 25px;
	width: 100px;
	height: 100px;
	z-index: -1;
}

Ici, l’élément absolute est par défaut au premier plan (car il est imbriqué dans le relative). En déclarant son z-index comme négatif, il vient se placer à l’arrière-plan.