Pozicionavimas absoliutaus tėvinio elemento atžvilgiu CSS

Ankstesnėje pamokoje išsiaiškinome, kad jei tėviniam elementui nustatome relative, tai jo palikuoniai bus absoliučiai pozicionuojami jo atžvilgiu. Taip dažniausiai elgiamasi, kai nenorima, kad tėvinis elementas iškristų iš normalios srauto.

Gali būti ir taip, kad tėviniam elementui nustatytas absolute. Šiuo atveju palikuoniai su absolute taip pat bus pozicionuojami šio tėvinio elemento atžvilgiu, o ne naršyklės lango atžvilgiu:

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

Результат: