Nilai Negatif dalam Positioning di CSS
Properti yang telah kita pelajari top, right,
bottom dan left dapat menerima
tidak hanya nilai positif, tetapi juga nilai
negatif. Mari kita lihat contohnya.
Contoh
Pada contoh berikut, elemen diposisikan secara absolut
terhadap induknya dan berada di posisi
0 dari atas, 0 dari kiri:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Contoh
Sekarang mari kita pindahkan elemen ke posisi
-20px dari atas, -30px dari kiri:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Dalam sampel berikut, blok hijau berada di
tengah layar menggunakan margin, sedangkan
blok merah diposisikan relatif terhadapnya.
Ulangi halaman sesuai dengan
sampel yang diberikan:
