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 өлшемінде тағы екі блок жасаңыз. Бірінші блокты ата-ананың жоғарғы оң жақ бұрышында, ал екінші блокты - төменгі сол жақ бұрышында орналастырыңыз.