Позисиони нисбат ба волидайн дар 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 позисионида мешаванд.