Ҷойгиркунӣ нисбат ба волидайн мутлақ дар 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 созед. Блоки аввалро дар кунҷи болоии рост волидайн ҷойгир кунед, ва блоки дуюмро - дар кунҷи поёнии чапи волидайн.