Пазіцыянаванне адносна абсалютнага бацькі ў 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. Размясціце першы блок у верхнім правым куце бацькі, а другі блок - у ніжнім левым куце.