CSS-ში მშობელთან შედარებით პოზიციონირება

თუ ელემენტს დაუყენებულია relative, ხოლო მის შთამომავალს - absolute, მაშინ ეს შთამომავალი პოზიციონირდება თავისი მშობელის მიმართ, და არა ბრაუზერის ფანჯარასთან შედარებით.

როგორც წესი, ამ შემთხვევაში მშობელს მიუთითებენ relative-ს ოფსეტების გარეშე. ამ შემთხვევაში ამ მშობელთან არაფერი არ ხდება, მაგრამ მისი ყველა შთამომავალი ახლა პოზიციონირდება მის მიმართ.

მოდით შევხედოთ მაგალითებს.

მაგალითი

დასაწყისისთვის მოდით უბრალოდ გავაკეთოთ მშობელი ბლოკი და შთამომავალი ბლოკი პოზიციონირების გარეშე:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

მაგალითი

ახლა მოდით აბსოლუტურად დავაპოზიციონიროთ მწვანე ბლოკი. ვინაიდან მშობელს არ აქვს მინიჭებული relative, შთამომავალი პოზიციონირდება ბრაუზერის ფანჯარასთან შედარებით:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

მაგალითი

ახლა მივუთითოთ მშობელს relative. ამ შემთხვევაში შთამომავალი პოზიციონირდება თავისი მშობელის მიმართ:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

პრაქტიკული ამოცანები

შემდეგ ამოცანებში მთავარი ბლოკი დგას ცენტრში margin-ის მნიშვნელობით auto, ხოლო დანარჩენები პოზიციონირდება მის მიმართ თვისების position გამოყენებით.