Позиционирање у односу на родитеља у 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.