Pozicionálás abszolút szülőhöz viszonyítva CSS-ben

Az előző leckében megvizsgáltuk, hogy ha a szülőnek relative-t adunk meg, akkor annak leszármazottai abszolút módon pozicionálódnak hozzá képest. Ezt leggyakrabban akkor alkalmazzuk, amikor nem akarjuk, hogy a szülőelem kikerüljön a normál flow-ból.

Előfordulhat az is, hogy a szülőnek absolute van megadva. Ebben az esetben a absolute-val rendelkező leszármazottak szintén egy ilyen szülőhöz képest pozicionálódnak, és nem a böngészőablakhoz viszonyítva:

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

Результат: