Positionnement relatif des éléments en CSS

Le positionnement relatif est défini avec la valeur relative pour la propriété position. Ce type de positionnement permet de décaler les éléments par rapport à leur position actuelle d'une valeur donnée. Cependant, tous les autres éléments de la page considéreront que l'élément se trouve à son emplacement d'origine. C'est-à-dire qu'avec ce type de positionnement, l'élément ne sort pas du flux normal.

Les décalages par rapport à la position actuelle sont définis par les propriétés top, right, bottom et left.

Exemple

Pour commencer, créons simplement deux blocs sans positionnement :

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Exemple

Ajoutons maintenant relative au premier bloc. Rien ne changera pour l'instant, car nous n'avons pas spécifié de décalage pour le bloc :

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Exemple

Décalons maintenant notre bloc de 30px vers le bas, en lui spécifiant la propriété top. Tous les autres éléments se comporteront comme si notre bloc était resté à l'endroit où il se trouvait initialement :

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Exemple

Décalons également notre bloc de 40px vers la droite, en lui spécifiant la propriété left :

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: relative;
	top: 30px;
	left: 40px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Exemple

Les valeurs négatives des propriétés top, right, bottom et left décalent dans la direction opposée. Par exemple, une valeur positive de top décale vers le bas, et une valeur négative - vers le haut.

Décalons notre deuxième bloc de 40px vers le haut, en lui spécifiant une valeur négative de la propriété top :

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Tâches pratiques

Les blocs suivants sont donnés :

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Déplacez ces blocs à l'aide du positionnement relatif de la manière suivante :