Positionnement absolu des éléments en CSS

Dans cette leçon, nous analyserons le positionnement absolu des éléments. Il permet de positionner les éléments selon les coordonnées spécifiées de la page. Par exemple, on peut placer un élément à la position 100px du haut de la page et 200px de la gauche. L'élément s'y déplacera, indépendamment du fait que d'autres éléments s'y trouvent et se superposera simplement à eux. On dit que dans ce cas, l'élément sort du flux normal du document : tous les autres éléments se comporteront comme si notre élément n'existait pas.

Pour rendre un élément positionné de manière absolue, il faut définir la propriété position avec la valeur absolute. En plus de cette propriété, deux autres sont nécessaires : l'une définira la coordonnée verticale, et l'autre - l'horizontale.

Pour la verticale, il faut définir une marge soit en haut, soit en bas. La marge en haut est définie par la propriété top, et la marge en bas - par la propriété bottom. Pour l'horizontale, il faut définir une marge soit à gauche, soit à droite. La marge à gauche est définie par la propriété left, et la marge à droite - par la propriété right.

Regardons des exemples.

Exemple

Pour commencer, créons simplement deux blocs sans positionnement (notez que les éléments ne sont pas collés au bord de la fenêtre, car body a une margin par défaut) :

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

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

Exemple

Maintenant, appliquons un positionnement absolu au bloc vert, en le plaçant à la position du haut 150px et de la gauche 100px :

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

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

Exemple

Maintenant, plaçons le bloc vert à la position 0px du haut et 0px de la gauche :

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

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

Exemple

Maintenant, plaçons le bloc vert à la position 0px du haut et 0px de la droite :

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exemple

Maintenant, plaçons le bloc vert à la position 0px du bas et 0px de la droite :

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exemple

Maintenant, plaçons le bloc vert à la position 0px du bas et 0px de la gauche :

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Tâches pratiques

À l'aide du positionnement absolu, placez les blocs de la manière suivante :