Pozícionovanie vzhľadom na absolútneho rodiča v CSS

V predchádzajúcej lekcii sme zistili, že ak rodičovi nastavíme relative, tak jeho potomkovia sa budú absolútne pozícionovať vzhľadom na neho. Takto sa často postupuje, keď nechcú, aby rodičovský prvok vypadol z normálneho toku.

Môže sa stať, že rodič má nastavené absolute. V tomto prípade sa potomkovia s absolute budú tiež pozícionovať vzhľadom na takého rodiča, a nie vzhľadom na okno prehliadača:

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

css#parent {
  position: absolute;
  top: 100px;
  left: 200px;
  
  width: 500px;
  height: 300px;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат: