Positionering ten opzichte van een absolute ouder in CSS

In de vorige les hebben we besproken dat, als je voor een ouder relative instelt, zijn afstammelingen zich absoluut zullen positioneren ten opzichte daarvan. Dit wordt meestal gedaan wanneer niet gewenst is dat het ouder-element uit de normale stroom valt.

Het kan ook zijn dat de ouder is ingesteld met absolute. In dat geval zullen afstammelingen met absolute zich ook positioneren ten opzichte van zo'n ouder, en niet ten opzichte van het browser venster:

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

Результат: