Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

CSS Position

Perkenalan

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.

Respon Peramban

Harap perhatikan juga bahwa respon peramban terhadap penerapan koordinat posisi relative pada elemen akan berbeda dengan posisi absolute dan fixed. Mendeklarasikan koordinat pada posisi relative akan menggeser elemen berdasarkan posisi asalnya, berbeda dengan posisi absolute dan fixed yang akan dipindahkan posisinya berdasarkan koordinat layar peramban. Seperti ini:

CSS Position
Respon posisi elemen terhadap layar peramban.
Contoh Deklarasi RelativeContoh Deklarasi AbsoluteContoh Deklarasi Fixed
#area-1 {
  position:relative;
  top:10px;
  left:20px;
  z-index:10;
}
#area-1 {
  position:absolute;
  top:10px;
  left:20px;
  z-index:10;
}
#area-1 {
  position:fixed;
  top:10px;
  left:20px;
  z-index:10;
}

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 18 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!