CSSda absolyut ota-ona nisbatan pozitsiyalash

Oldingi darsda biz shuni ko'rib chiqdikki, agar ota-ona elementga relative berilsa, uning avlodlari unga nisbatan absolyut pozitsiyalanadi. Bu, odatda, ota-ona elementning normal oqimdan chiqib ketishini xohlamaganda qo'llaniladi.

Bundan tashqari, ota-ona elementga absolute berilgan holatlar ham bo'lishi mumkin. Bunday holda, absolute berilgan avlodlar ham brauzer oynasiga nisbatan emas, balki shu ota-ona elementga nisbatan pozitsiyalanadi:

<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 o'lchamdagi absolyut pozitsiyalangan kvadrat blok yarating. Uning ichida yana ikkita 50px o'lchamdagi blok yarating. Birinchi blokni ota-onaning yuqori o'ng burchagiga, ikkinchi blokni esa pastki chap burchagiga joylashtiring.