Posicionamento relativo ao pai absoluto em CSS

Na lição anterior, vimos que, se definirmos relative para um elemento pai, seus descendentes serão posicionados absolutamente em relação a ele. Isso é comumente feito quando não queremos que o elemento pai saia do fluxo normal.

Pode acontecer também que o elemento pai tenha absolute definido. Neste caso, os descendentes com absolute também serão posicionados em relação a esse pai, e não em relação à janela do navegador:

<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;
}

Crie um bloco quadrado com posicionamento absoluto e tamanho de 400px. Dentro dele, crie mais dois blocos com tamanho de 50px. Posicione o primeiro bloco no canto superior direito do pai, e o segundo bloco - no canto inferior esquerdo.