Posisjonering i forhold til absolutt forelder i CSS

I forrige leksjon fant vi ut at, hvis en forelder gis relative, vil dens etterkommere bli posisjonert absolutt i forhold til den. Dette gjøres vanligvis når man ikke vil at forelderelementet skal falle ut av normal flyt.

Det kan også være at forelderen har absolute. I dette tilfellet vil etterkommere med absolute også bli posisjonert i forhold til en slik forelder, og ikke i forhold til nettleservinduet:

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

Результат: