CSSda ota-ona nisbatan pozitsiyalash

Agar elementga relative berilsa, va uning avlodiga - absolute berilsa, bu avlod brauzer oynasiga nisbatan emas, balki o‘z ota-onasiga nisbatan pozitsiyalanadi.

Odatda, bunday holda ota-onga siljishlarsiz relative beriladi. Bu holda ota-bilan hech narsa bo‘lmaydi, lekin uning barcha avlodlari endi unga nisbatan pozitsiyalanadi.

Keling, misollar bilan ko‘ramiz.

Misol

Boshlanish uchun keling, pozitsiyalashsiz ota-ona bloki va avlod bloki yasaymiz:

<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;
}

Misol

Keling, endi yashil blokni absolyut pozitsiyalaymiz. Ota-onga relative berilmagani sababli, avlod brauzer oynasiga nisbatan pozitsiyalanadi:

<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;
}

Misol

Endi ota-onga relative beramiz. Bu holda avlod o‘z ota-onasiga nisbatan pozitsiyalanadi:

<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;
}

Amaliy vazifalar

Quyidagi vazifalarda asosiy blok auto qiymatiga ega margin yordamida markazda turadi, qolganlari esa position xususiyati yordamida unga nisbatan pozitsiyalanadi.