Позициониране спрямо родител в CSS

Ако на елемент е зададен relative, а на негов потомък - absolute, този потомък ще се позиционира спрямо своя родител, а не спрямо прозореца на браузъра.

Обикновено в такъв случай на родителя се задава relative без отмествания. В този случай нищо не се случва с този родител, но всички негови потомци сега ще се позиционират спрямо него.

Нека разгледаме примери.

Пример

За начало нека просто направим родителски блок и потомък блок без позициониране:

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

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

Результат:

Пример

Сега нека абсолютно позиционираме зеления блок. Тъй като на родителя не е зададен relative, потомъкът ще се позиционира спрямо прозореца на браузъра:

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

css#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. В този случай потомъкът ще се позиционира спрямо своя родител:

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

css#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.