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:

<div id="parent">
	<div id="child"></div>
</div>

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

Buat satu blok segi empat sama dengan penempatan mutlak bersaiz 400px. Di dalamnya, buat dua lagi blok bersaiz 50px. Letakkan blok pertama di penjuru atas kanan ibu bapa, dan blok kedua - di penjuru bawah kiri.