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 өлчөмүндөгү блок жасаңыз. Биринчи блокту ата-эненин жогорку оң бурчуна, экинчи блокту төмөнкү сол бурчуна жайгаштырыңыз.