Positionnement par rapport à un parent absolu en CSS

Dans la leçon précédente, nous avons vu que si l'on attribue relative à un parent, ses descendants avec un positionnement absolu se positionneront par rapport à lui. C'est une approche courante lorsque l'on ne souhaite pas que l'élément parent sorte du flux normal.

Il peut aussi arriver que le parent ait lui-même un absolute. Dans ce cas, les descendants avec absolute se positionneront également par rapport à ce parent, et non par rapport à la fenêtre du navigateur :

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

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

Créez un bloc carré avec un positionnement absolu d'une taille de 400px. À l'intérieur, créez deux autres blocs d'une taille de 50px. Placez le premier bloc dans le coin supérieur droit du parent, et le second bloc - dans le coin inférieur gauche.