Penentudposisian Mutlak Tanpa Koordinat dalam CSS
Sebenarnya, menentukan koordinat untuk penentudposisian mutlak
tidaklah wajib. Jika elemen hanya ditulis dengan
position bernilai
absolute, maka ia akan menjadi elemen berposisi mutlak,
tetapi akan kekal di tempat yang sama.
Sementara itu, semua elemen lain akan
berkelakuan seolah-olah elemen kita tiada
dan mungkin bertindih dengannya.
Mari kita lihat contoh-contohnya.
Contoh
Sebagai permulaan, mari kita buat tiga blok tanpa penentudposisian dan letakkan beberapa teks di antaranya:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Contoh
Sekarang mari kita tambahkan absolute kepada blok hijau.
Hasilnya, blok ini akan kekal di tempatnya,
sementara semua elemen di bawahnya akan berkelakuan seolah-olah
elemen kita tiada dan akan bertindih ke atasnya:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Contoh
Sekarang mari kita tambahkan sifat left,
tanpa menambah posisi menegak. Hasilnya,
secara mendatar blok kita akan berada pada nilai yang ditentukan,
manakala secara menegak - ia akan kekal
di tempat asalnya:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* menambah posisi secara mendatar */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Contoh
Sekarang, sebaliknya, mari kita tambahkan sifat
top, tanpa menambah posisi mendatar.
Hasilnya, secara menegak blok kita akan berada
pada nilai yang ditentukan, manakala secara mendatar -
ia akan kekal di tempat asalnya:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* menambah posisi secara menegak */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
