Le positionnement des blocs

La propriété position permet de changer la façon dont un élément se place dans la page. Nous allons voir la différence entre les valeurs static, relative, absolute et fixed, puis comprendre dans quels cas elles sont vraiment utiles.

Introduction à la propriété position

Par défaut, les blocs HTML se placent les uns après les autres dans l'ordre du document. Le navigateur suit ce qu'on appelle le flux normal de la page.

La propriété position sert justement à modifier ce comportement. Selon la valeur choisie, un élément peut rester à sa place, se décaler légèrement, sortir du flux normal ou rester collé à la fenêtre du navigateur.

Le plus important au début est de bien voir qu'il ne s'agit pas de quatre variantes presque identiques. Chaque valeur répond à un besoin différent.

• static laisse l'élément dans son comportement normal,
• relative permet de le décaler sans le sortir du flux,
• absolute le retire du flux pour le placer plus librement,
• fixed l'attache à la fenêtre du navigateur.

Pour déplacer un élément positionné, on utilise souvent les propriétés top, right, bottom et left. Ces propriétés acceptent en général les unités CSS habituelles comme px, %, em, rem, vw ou vh.

Position static

La valeur static est la valeur par défaut de la propriété position. En pratique, cela veut dire que l'élément suit le flux normal du document.

Tant qu'un élément est en position: static;, les propriétés top, right, bottom et left n'ont pas d'effet visible.

						
							<div class="bloc">Bloc 1</div>
							<div class="bloc special">Bloc 2</div>
							<div class="bloc">Bloc 3</div>
						
					

						
							.bloc{
								padding: 15px;
								margin-bottom: 10px;
								background: #d9eef2;
							}

							.special{
								position: static;
								top: 20px;
								left: 30px;
							}
						
					

Même si nous avons écrit top et left, le deuxième bloc ne bouge pas. Voilà pourquoi on utilise rarement static volontairement : cette valeur sert surtout à rappeler qu'un élément garde son placement normal.

Position relative

Avec position: relative;, l'élément reste dans le flux normal, mais on peut le décaler par rapport à sa position de départ.

C'est un point très important : l'élément bouge visuellement, mais sa place d'origine est toujours réservée dans la page. Les autres blocs se comportent donc comme s'il était encore à sa position initiale.

						
							<div class="carte">Carte 1</div>
							<div class="carte carte-active">Carte 2</div>
							<div class="carte">Carte 3</div>
						
					

						
							.carte{
								padding: 15px;
								margin-bottom: 10px;
								background: #d9eef2;
							}

							.carte-active{
								position: relative;
								left: 20px;
								top: 10px;
								background: #f6e5c4;
							}
						
					

Ici, la deuxième carte est légèrement décalée. Pourtant, le navigateur continue à lui réserver sa place initiale. C'est pour cela qu'on peut voir un petit vide à l'endroit où elle se trouvait au départ.

On utilise souvent relative pour faire de petits ajustements visuels, mais aussi pour préparer un élément parent qui servira de repère à un enfant en absolute.

Position absolute

Avec position: absolute;, l'élément sort du flux normal. Les autres blocs se replacent donc comme s'il n'était plus là.

Ensuite, l'élément se positionne par rapport à un repère. Si un ancêtre possède une position autre que static, c'est généralement cet ancêtre qui devient le repère. Sinon, l'élément se place par rapport à la page.

C'est pour cela qu'on voit très souvent le duo suivant :

• un parent en position: relative;,
• un enfant en position: absolute;.

						
							<div class="produit">
								<span class="badge">Nouveau</span>
								<h3>Casque audio</h3>
								<p>Un exemple de carte produit.</p>
							</div>
						
					

						
							.produit{
								position: relative;
								padding: 30px 20px 20px 20px;
								background: #d9eef2;
							}

							.badge{
								position: absolute;
								top: 10px;
								right: 10px;
								padding: 4px 8px;
								background: #007890;
								color: white;
							}
						
					

Ici, le badge est librement placé dans le coin supérieur droit de la carte. Il ne pousse pas le titre ni le paragraphe, car il est sorti du flux.

Attention ! Comme un élément en absolute sort du flux, il peut facilement se superposer à d'autres contenus si vous ne prévoyez pas assez d'espace.

Position fixe

Avec position: fixed;, l'élément est lui aussi retiré du flux normal. La grande différence avec absolute, c'est qu'il se place par rapport à la fenêtre du navigateur.

Autrement dit, si vous faites défiler la page, l'élément reste visible à l'endroit indiqué par top, right, bottom ou left.

						
							<a href="#top" class="retour-haut">Haut de page</a>
						
					

						
							.retour-haut{
								position: fixed;
								right: 20px;
								bottom: 20px;
								padding: 10px 14px;
								background: #007890;
								color: white;
							}
						
					

On utilise souvent fixed pour un bouton de retour en haut, une petite aide flottante, une barre d'action ou un menu toujours visible.

Attention ! Un élément fixé peut masquer une partie du contenu sur les petits écrans s'il est trop grand ou mal placé.

Comment choisir entre relative, absolute et fixed

Quand on débute, on hésite souvent entre ces valeurs. En réalité, vous pouvez vous poser une question simple : est-ce que l'élément doit rester dans le flux normal ou non ?

• Si vous voulez garder la place normale de l'élément tout en le décalant un peu, utilisez relative.
• Si vous voulez placer un élément précisément dans une zone donnée, souvent à l'intérieur d'un parent, utilisez absolute.
• Si vous voulez qu'il reste visible par rapport à la fenêtre pendant le scroll, utilisez fixed.

La valeur static, elle, représente simplement le comportement normal. Elle sert surtout de point de comparaison pour comprendre les autres.

Voilà pourquoi on utilise ces positions : non pas pour déplacer tous les éléments au hasard, mais pour répondre à des besoins de mise en page bien précis.