Foto Sampul

Tab Profil

Kronologi Tentang Teman Foto
Santa Mars

CSS Position


Sunday, March 17, 2013

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 RelativeContoh Deklarasi AbsoluteContoh 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;
}

Artikel Terkait

3 comments:

  1. Mas...

    Dulu saya dah pernah pakek unduhan template windows dari blog dari mas.

    Tapi hanya berselang seminggu dah pada ilang, pas kita buka cuman background'y yg nampak, sedangkan gambar fb, twitter, g+, my profile yg dilayar depan yg ketika diarahin kursor berputar2 tu dah ngilang.

    Kenapa ya mas?

    Jadi sekarang dah ana ubah seperti biasa lagi, bener2 dah biasa.
    Padahal sebelum pakek punya mas dah luar biasa ana buat template standar'y dgn penuh kreasi. :(
    tapi krn punya mas maen ngilang gitu ana jadi males ngeblog huuaaakk :'(

    ReplyDelete
  2. aku belum paham banget serius deh, gangerti malahan

    ReplyDelete

Copyright © 2016 | Privasi | SiteMap | Follow | Download Template