Poziționarea relativă la părintele absolut în CSS

În lecția anterioară am aflat că, dacă unui părinte i se atribuie relative, atunci descendenții săi se vor poziționa absolut relativ la acesta. Acesta este un mod obișnuit de a face, când nu se dorește ca elementul părinte să iasă din fluxul normal.

Se poate întâmpla și ca părintele să aibă atribuit absolute. În acest caz, descendenții cu absolute se vor poziționa și ei relativ la acest părinte, și nu relativ la fereastra browserului:

<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ți un bloc pătrat cu poziționare absolută de dimensiune 400px. În interiorul său creați încă două blocuri de dimensiune 50px. Plasați primul bloc în colțul din dreapta sus al părintelui, iar al doilea bloc - în colțul din stânga jos.