Позициониране спрямо абсолютен родител в 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. Разположете първия блок в горния десен ъгъл на родителя, а втория блок - в долния ляв ъгъл.