Posicionamiento relativo a un padre absoluto en CSS

En la lección anterior analizamos que, si al elemento padre se le asigna relative, entonces sus descendientes se posicionarán de forma absoluta en relación con él. Esto se hace a menudo cuando no se quiere que el elemento padre salga del flujo normal.

También puede darse el caso de que al padre se le asigne absolute. En este caso, los descendientes con absolute también se posicionarán en relación con dicho padre, y no en relación con la ventana del 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;
}

Crea un bloque cuadrado con posicionamiento absoluto de tamaño 400px. Dentro de él, crea otros dos bloques de tamaño 50px. Coloca el primer bloque en la esquina superior derecha del padre, y el segundo bloque - en la esquina inferior izquierda.