პოზიციონირება აბსოლუტური მშობელის მიმართ 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. განათავსეთ პირველი ბლოკი მშობლის ზედა მარჯვენა კუთხეში, ხოლო მეორე ბლოკი - ქვედა მარცხენა კუთხეში.