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