Propriété position

La propriété position définit la méthode de positionnement des éléments. Cette propriété est le plus souvent utilisée conjointement avec les propriétés top, right, bottom, left, qui définissent les marges en haut, à droite, en bas, à gauche respectivement.

Syntaxe

sélecteur {
	position: absolute | relative | fixed | static | sticky;
}

Valeurs pour position

Valeur	Description
`absolute`	Positionnement absolu. L'élément est retiré du flux normal du document et positionné par rapport à l'ancêtre positionné le plus proche (s'il existe) ou par rapport à la fenêtre du navigateur.
`relative`	Positionnement relatif. L'élément est décalé par rapport à sa position normale dans le flux du document, mais l'espace qu'il occupait reste réservé.
`fixed`	Positionnement fixe. L'élément est retiré du flux normal du document et positionné par rapport à la fenêtre du navigateur. Il reste en place lors du défilement de la page.
`static`	Positionnement statique. Cette valeur signifie l'absence de positionnement et l'élément se comporte normalement.
`sticky`	Positionnement adhésif. L'élément se comporte comme `relative` jusqu'à ce qu'il atteigne une position donnée lors du défilement, après quoi il reste collé à l'endroit spécifié (comme `fixed`).

Valeur par défaut : static.

Exemple . Positionnement absolu

Plaçons un élément dans le coin supérieur gauche de l'écran avec de petites marges :

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemple . Positionnement absolu

Maintenant, plaçons un élément dans le coin supérieur droit de l'écran avec de petites marges :

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemple . Positionnement fixe

Avec le positionnement fixe, l'élément reste en place lors du défilement :

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemple . Positionnement relatif

Avec le positionnement relatif, l'élément est décalé par rapport à sa position normale, mais les autres éléments se comportent comme si l'élément n'était pas décalé :

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Exemple . Imbrication

Si la propriété position du parent a la valeur relative, alors les éléments positionnés absolument seront positionnés par rapport au parent :

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemple . Imbrication

Si la propriété position du parent a la valeur absolute, alors les éléments positionnés absolument seront positionnés par rapport au parent :

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemple . Positionnement adhésif

Si pour un élément la propriété position a la valeur sticky, alors l'élément se comporte comme relative jusqu'à ce qu'il atteigne une position donnée lors du défilement, après quoi il reste collé à l'endroit. Créons un en-tête adhésif :

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Exemple . Sans position

Si un élément reçoit un positionnement absolu sans spécifier de position, alors l'élément reste à l'endroit où il était sans positionnement, mais les autres éléments cesseront de le prendre en compte :

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemple . Un seul axe

Avec le positionnement absolu, on peut spécifier la position seulement sur un axe. Par exemple, si nous définissons la propriété top, alors verticalement l'élément prendra la position voulue, mais horizontalement il restera à l'endroit où il était :

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemple . Toutes les positions

Avec le positionnement absolu, on peut spécifier les positions sur tous les côtés, sans définir la largeur et la hauteur. Dans ce cas, l'élément se placera au centre du bloc parent :

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Voir aussi

la propriété z-index,
qui définit la superposition des éléments