Pozicioniranje glede na absolutnega starša v CSS

V prejšnji lekciji smo ugotovili, da če staršu nastavimo relative, se bodo njegovi potomci absolutno pozicionirali glede nanj. To se pogosto naredi, ko ne želijo, da bi nadrejeni element izpadel iz običajnega toka.

Lahko se zgodi tudi, da je staršu določen absolute. V tem primeru se bodo tudi potomci z absolute pozicionirali glede na takega starša in ne glede na okno brskalnika:

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

Результат: