Mengatur Posisi CSS ( CSS Position)
Pernahkah kalian melihat elemen yang tampak saling bertumpukan,
melayang, atau tampak keluar dari garis batas? Itu semua dibuat
menggunakan
CSS Position. Ada empat posisi elemen dalam CSS:
Static, Relative, Absolute dan Fixed. Selain deklarasi posisi, terdapat
pula beberapa properti yang biasanya dituliskan bersama dengan deklarasi
posisi seperti top, right, bottom, left dan z-index.
top, right, bottom dan
left adalah koordinat posisi. Saat
kita menambahkan nilai koordinat pada posisi yang sesungguhnya, maka
elemen akan bergeser sesuai dengan besar nilai koordinat.
top, right, bottom dan left berbeda dengan margin-top, margin-right,
margin-bottom dan margin-left. Nilai margin difokuskan kepada jarak
elemen terhadap elemen lainnya, sedangkan nilai koordinat lebih
difokuskan kepada offset posisi elemen dari tempat asalnya.
z-index adalah urutan tumpukan. Saat kita mendeklarasikan
position:absolute, maka kemungkinan yang terjadi adalah elemen akan
bertumpuk di sebelah atas elemen atau di bawah elemen. Jika yang terjadi
adalah yang ke dua, maka untuk mengangkatnya, kita harus
mendeklarasikan z-index dengan nilai yang lebih besar dari 1.
Static
Ini adalah posisi sebenarnya. Mendeklarasikan position:static sama saja dengan tidak mendeklarasikan CSS Posisi.
Relative
Mendeklarasikan position:relative pada elemen secara kasat mata tidak
akan mengubah apapun, namun kita bisa menerapkan koordinat posisi dan
urutan tumpukan pada tipe posisi ini.
Absolute
Mendeklarasikan position:absolute pada elemen akan benar-benar
memutuskan aliran elemen dari tempat asalnya dan membuat elemen
bertumpuk dengan elemen lainnya.
Fixed
Mendeklarasikan position:fixed pada elemen akan benar-benar memutuskan
aliran elemen dari tempat asalnya dan membuat elemen bertumpuk dengan
elemen lain. Kelebihan penerapan posisi ini adalah akan membuat elemen
tampak melayang dan tidak terpengaruh gerakan scroll bar.
| Contoh Deklarasi Relative | Contoh Deklarasi Absolute | Contoh Deklarasi Fixed |
|---|
#area1 {
position:relative;
top:10px;
left:20px;
z-index:10;
} | #area1 {
position:absolute;
top:10px;
left:20px;
z-index:10;
} | #area1 {
position:fixed;
top:10px;
left:20px;
z-index:10;
} |
