Позиционирање во однос на апсолутен родител во CSS

Во претходната лекција разгледавме дека, ако на родителот му се зададе relative, тогаш неговите потомци ќе се позиционираат апсолутно во однос на него. Ова најчесто се прави кога не се сака родителскиот елемент да излезе од нормалниот тек.

Може да се случи и родителот да има зададено absolute. Во овој случај, потомците со absolute исто така ќе се позиционираат во однос на таков родител, а не во однос на прозорецот на прелистувачот:

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

Направете квадратен блок со апсолутно позиционирање со големина од 400px. Внатре во него направете уште два блока со големина од 50px. Поставете го првиот блок во горниот десен агол на родителот, а вториот блок - во долниот лев агол.