Posisi Relatif terhadap Induk Absolut di CSS
Dalam pelajaran sebelumnya, kita telah membahas bahwa,
jika induk diberi relative, maka
keturunannya akan diposisikan secara absolut
terhadapnya. Ini adalah cara yang paling umum dilakukan,
ketika tidak ingin elemen induk
keluar dari alur normal.
Bisa juga terjadi, bahwa induk diberi
absolute. Dalam hal ini, keturunan dengan
absolute juga akan diposisikan
terhadap induk seperti itu, dan bukan terhadap
jendela browser:
<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;
}
:
Buatlah blok persegi dengan posisi
absolut berukuran 400px.
Di dalamnya buat dua blok lagi berukuran 50px.
Tempatkan blok pertama di sudut kanan atas
induk, dan blok kedua - di sudut
kiri bawah.
