Pozicioniranje u odnosu na roditelja u CSS-u

Ako je elementu postavljen relative, a njegovom potomku - absolute, onda će se taj potomak pozicionirati u odnosu na svog roditelja, a ne u odnosu na prozor pregledača.

U pravilu, u tom slučaju roditelju se dodeljuje relative bez pomeraja. U ovom slučaju se sa ovim roditeljem ništa ne dešava, ali će se svi njegovi potomci sada pozicionirati u odnosu na njega.

Pogledajmo na primerima.

Primer

Za početak hajde da napravimo blok-roditelj i blok-potomak bez pozicioniranja:

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

Результат:

Primer

Hajde sada da apsolutno pozicioniramo zeleni blok. Pošto roditelju nije dodeljen relative, potomak će se pozicionirati u odnosu na prozor pregledača:

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

Результат:

Primer

Dodelimo sada roditelju relative. U ovom slučaju će se potomak pozicionirati u odnosu na svog roditelja:

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

Результат:

Praktični zadaci

U sledećim zadacima glavni blok je postavljen u centru pomoću margin sa vrednošću auto, a ostali se pozicioniraju u odnosu na njega pomoću svojstva position.