Positionering i forhold til absolut forælder i CSS

I den forrige lektion gennemgik vi, at hvis en forælder er sat til relative, så villes dens efterkommere blive positioneret absolut i forhold til den. Dette gøres mest almindeligt, når man ikke ønsker, at det overordnede element skal falde ud af den normale flow.

Det kan også være tilfældet, at forælderen har absolute. I dette tilfælde vil efterkommere med absolute også blive positioneret i forhold til en sådan forælder, og ikke i forhold til browserens vindue:

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

Результат: