Pozicionovanie vzhľadom na rodiča v CSS

Ak je prvku nastavené relative, a jeho potomkovi - absolute, potom sa tento potomok bude pozicionovať vzhľadom na svojho rodiča, a nie vzhľadom na okno prehliadača.

Spravidla sa v takom prípade rodičovi nastaví relative bez posunov. V tomto prípade sa s týmto rodičom nič nestane, ale všetci jeho potomkovia sa teraz budú pozicionovať vzhľadom neho.

Pozrime sa na príklady.

Príklad

Na začiatok si jednoducho vytvorme blok-rodiča a blok-potomka bez pozicionovania:

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

Результат:

Príklad

Teraz absolútne pozicionujme zelený blok. Keďže rodičovi nie je nastavené relative, potomok sa bude pozicionovať vzhľadom na okno prehliadač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;
}

Результат:

Príklad

Nastavme teraz rodičovi relative. V tomto prípade sa potomok bude pozicionovať vzhľadom na svojho rodiča:

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

Результат:

Praktické úlohy

V nasledujúcich úlohách je hlavný blok vycentrovaný pomocou margin s hodnotou auto, a ostatné sú pozicionované vzhľadom naň pomocou vlastnosti position.