Posicionamento relativo ao pai absoluto em CSS

Na lição anterior, vimos que, se definirmos relative para um elemento pai, seus descendentes serão posicionados absolutamente em relação a ele. Isso é comumente feito quando não queremos que o elemento pai saia do fluxo normal.

Pode acontecer também que o elemento pai tenha absolute definido. Neste caso, os descendentes com absolute também serão posicionados em relação a esse pai, e não em relação à janela do navegador:

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

Результат: