Comment utiliser la propriété position en CSS

La propriété CSS position sert à positionner des éléments HTML. La propriété position peut prendre les valeurs suivantes :

static valeur par défaut.
relative.
absolute.
fixed.

Ces propriétés spécifient une valeur de décalage par rapport aux bords d'une boîte de référence. C'est en appliquant des décalages que l'on va positionner une boîte par rapport à sa boîte de référence. On verra quelle est la boîte de référence dans chaque situation.

top spécifie le décalage par rapport au bord supérieur.
bottom spécifie le décalage par rapport au bord inférieur.
left spécifie le décalage par rapport au bord gauche.
right spécifie le décalage par rapport au bord droit.

Vous choisissez top ou bottom mais pas les deux. Vous choisissez left ou right mais pas les deux.

N'oubliez pas que vous pouvez aussi produire des décalages avec des marges.

Un élément est positionné si la valeur de sa propriété position n'est pas static.

La valeur static est la valeur par défaut de la propriété position.
Avec cette valeur de la propriété position l'élément est dans le flux. Si besoin voyez ce tutoriel : Qu'est ce que le positionnement dans le flux ?.
Les propriétés de décalage ne sont pas utilisables.
Même si c'est la valeur par défaut, vous pouvez avoir besoin de la valeur static pour ramener dans le flux un élément qui en a été sortie.

Dans l'exemple ci-dessous l'élément div#alterner est positionné à static lorsque la fenêtre est petite et à absolute quand la fenêtre est plus grande.

Tester le code

Si la propriété position a la valeur relative alors la boîte est positionnée mais elle reste dans le flux. La boîte de référence pour les décalages est la boîte elle même placée dans le flux sur sa position par défaut. Les décalages n'influencent pas les autres boîtes. L'espace occupé est le même avec ou sans décalages. Par contre il peut y avoir chevauchement de boîtes.

Ci-dessous la propriété position vaut relative. La boîte est positionnée mais elle reste dans le flux. Visuellement il ne se passe rien sauf que maintenant je peux appliquer des décalages par rapport à cette position. Ci-dessous j'ai tracé deux axes :

Un premier axe sur le bord gauche car dans l'étape suivante je vais appliquer un premier décalage par rapport au bord gauche.
Un deuxième axe sur le bord bas car dans l'étape suivante je vais appliquer un deuxième décalage par rapport au bord bas.
Pour éviter le chevauchement de boîte j'ai mis un margin-top de 50px sur le div conteneur pour l'espacer du header.

Boite en position relative sans décalage

Ci-dessous j'applique des décalages :

J'applique un décalage par rapport au bord gauche avec la déclaration left:3rem; ce qui provoque un décalage vers la droite.
J'applique un décalage par rapport au bord bas avec la déclaration bottom:2rem; ce qui provoque un décalage vers le haut.

Boite en position relative avec décalage

<!DOCTYPE html>
<html lang='fr'>
<head>
	<meta charset="utf-8">
	<style>
		#conteneur {
			background-color: #f3e472;
			width: 400px;
			border: 2px solid black;
			/* Il me faut une marge pour éviter le chevauchement */
			/* de l'étiquette sur le h1 du header */
			margin-top: 50px;
			text-align: justify;
		}
		#etiquette {
			/* Je positionne l'élément puis je place des décalages */
			position: relative;
			bottom: 2rem;
			left: 3rem;
			border: 2px solid black;
			/* Il faut du inline-block pour que le div ait la taille de son contenu */
			display: inline-block;
			background-color: orange;
			border-radius: 10px;
			padding: 1rem;
		}
		#conteneur p:nth-child(2) {
			margin-top: 0;
		}
	</style>
</head>
<body>
	<header>Mon header</header>
	<div id='conteneur'>
		<div id='etiquette'>Label de la boite</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, commodi consequatur error excepturi enim
			sed ab hic laudantium eveniet animi. Temporibus, velit neque natus delectus consequatur ipsum corporis quis veniam
			praesentium nesciunt reiciendis cupiditate ratione ex possimus doloremque excepturi debitis laudantium
			tenetur minus soluta commodi mollitia alias sed aspernatur similique consectetur obcaecati. Iste, commodi
			ab facilis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, necessitatibus.</p>
	</div>
</body>
</html>

Tester le code

Je vous explique ci-dessous le fonctionnement de base dans ses grandes lignes. Ensuite je fais un exemple concret.

Une boîte qui est positionnée en position:absolute; est sortie du flux.
Ça nous donne la possibilité de la superposer à d'autres boîtes. Et c'est là l'intérêt.
Pour la positionner il faudra appliquer des décalages. Ces décalages seront appliqués par rapport à une boîte de référence qui sera soit celle du dernier ancêtre positionné soit celle du body. Donc il vous faudra d'abord "fabriquer" un ancêtre ou en choisir un. Puis il vous faudra le positionner. Si vous ne le faites pas ce sera le body qui jouera ce rôle sans que vous ayez besoin de le demander.

Dans l'exemple suivant je mets en pratique ce que je viens d'expliquer :

Je place une image qui contient une croix dans un conteneur qui est le header. Ca ça se passe au niveau du HTML. Le header est parent de l'image. C'est lui qui va être l'ancêtre que je vais positionner. Remarquez qu'il est parent direct mais ce n'est absolument pas indispensable.
Pour le positionner je place l'élément header en position:relative;. Il reste dans le flux et étant donné qu'il n'y a pas de décalage ça ne change rien pour lui. Ce n'est pas pour lui que je le fais c'est pour l'image qui est dedans. Il devient son ancêtre positionné.
Je place l'élément img en position:absolute;. Son ancêtre positionné étant le header. Pour déplacer img dans header il faut que je demande des décalages par rapport à la boîte de header.
Je demande 10px de décalage par rapport au bord droit de la boîte du header avec la déclaration right: 10px;.
Je demande 5px de décalage par rapport au bord haut de la boîte du header avec la déclaration top: 5px;.

<!DOCTYPE html>
<html lang='fr'>
<head>
	<meta charset="utf-8">
	<style>
		section {
			width: 300px;
		}
		header {
			/* position relative => ça ne change rien pour lui */
			position: relative;
			border: 2px solid black;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			background-color: orange;
			line-height: 45px;
			padding-left: 10px;
		}
		img {
			/* position absolute => sa référence c'est la boite du header */
			position: absolute;
			/* décalage de 10px par rapport au bord droit (du header) */
			right: 10px;
			/* décalage de 5px par rapport au bord haut (du header) */
			top: 5px;
			cursor: pointer;
		}
		#main-box {
			border-right: 2px solid black;
			border-left: 2px solid black;
			border-bottom: 2px solid black;
			background-color: #f3e472;
			padding: 10px;
		}
	</style>
</head>
<body>
	<section>
		<header>Titre de ma Boite<img src='square-cross-32.png' alt='Fermer la boite'></header>
		<div id='main-box'>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, adipisci, cumque
			obcaecati perferendis accusamus nulla itaque nihil odio laudantium autem.
		</div>
	</section>
</body>
</html>

Tester le code

Dans l'exemple ci-dessous je superpose une grande boîte (à droite) placée dans le flux avec une marge gauche et un menu (à gauche) positionné en fixed et placé dans cette marge. La boîte de référence pour les décalages est celle de l'élément body car il n'y a pas de parent positionné. La boîte correspond donc à la fenêtre du navigateur. L'objectif bien sûr est de pouvoir scroller la grande boîte sans que le menu ne bouge. Ce qui est le cas puisqu'il est en quelque sorte "attaché à la fenêtre".

Dans le code ci-dessous la boîte jaune de l'image ci-dessus c'est la section d'id conteneur. Le menu est constitué d'une liste à puces placée dans l'élément nav.

Tester le code

CSS La propriété position.

#1 Les valeurs de la propriété position

#2 Les propriétés de décalage

#3 Qu'est ce qu'on appelle un élément positionné ?

#4 La valeur static

#5 La valeur relative

#6 La valeur absolute

#7 La valeur fixed