Penempatian Relatif kepada Ibu Bapa Mutlak dalam CSS

Dalam pelajaran sebelumnya, kita telah membincangkan bahawa, jika ibu bapa diberikan relative, maka anak-anaknya akan ditempatkan secara mutlak relatif kepadanya. Ini sering dilakukan apabila tidak mahu elemen ibu bapa keluar dari aliran normal.

Mungkin juga berlaku bahawa ibu bapa mempunyai absolute. Dalam kes ini, anak-anak dengan absolute juga akan ditempatkan relatif kepada ibu bapa tersebut, dan bukan relatif kepada tetingkap pelayar:

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

Результат: