Positionering relativt till en absolut förälder i CSS

I föregående lektion gick vi igenom att, om en förälder sätts till relative, så kommer dess barn att positioneras absolut relativt till den. Detta är vanligtvis hur man gör när man inte vill att det förälder-elementet ska lämna det normala flödet.

Det kan också hända att föräldern har satt absolute. I det fallet kommer barn med absolute också att positioneras relativt till en sådan förälder, och inte relativt till webbläsarfönstret:

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

Результат: