Positionnement relatif au parent en CSS

Si un élément a la valeur relative, et son enfant - absolute, alors cet enfant sera positionné par rapport à son parent, et non par rapport à la fenêtre du navigateur.

En règle générale, dans ce cas, on spécifie relative au parent sans décalage. Dans ce cas, rien n'arrive à ce parent, mais tous ses enfants se positionneront maintenant par rapport à lui.

Regardons des exemples.

Exemple

Pour commencer, créons simplement un bloc parent et un bloc enfant sans positionnement :

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Exemple

Positionnons maintenant le bloc vert de manière absolue. Comme le parent n'a pas de relative, l'enfant sera positionné par rapport à la fenêtre du navigateur :

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Exemple

Spécifions maintenant relative au parent. Dans ce cas, l'enfant sera positionné par rapport à son parent :

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Tâches pratiques

Dans les tâches suivantes, le bloc principal est centré à l'aide de margin avec la valeur auto, et les autres sont positionnés par rapport à lui en utilisant la propriété position.