Gadget Menggantung Pada Elemen Tertentu - Konsultasi

Gadget Absolute Position pada DIV Tertentu - Pagi ini kembali membahas CSS. Banyak permasalahan atau pertanyaan  yang muncul soal widget atau elemen menggantung. Mungkin sudah banyak yang tahu tentang cara membuat widget selalu di pojok layar, menggantung dan tidak ikut bergerak ketika scroll di gerakkan. Memanfaatkan css position: absolute/fixed kita bisa melakukannya.

Namun, pemula banyak mengalami kendala ketika ingin implementasikan pemosisian tersebut pada bagian divisi atau elemen tertentu. Misalkan ia ingin membuat judul postingan atau foto postingan menggantung pada main-wrapper, atau ia ingin membuat gadget di sidebar menggantung pada sidebar-wrapper, seperti contoh pada gambar berikut ini:

 Elemen Waktu Posting menggantung

 Judul Postingan Menggantung

 Foto Author menggantung pada class .post

 Judul gadget menggantung pada .sidebar .widget

Semua itu bisa Anda lakukan dan masih banyak lagi modifikasi yang mungkin Anda lakukan. Untuk membuat effect effect seperti itu. Masalah yang sering dialamai blogger adalah: "widget bukannya menggantung pada elemen/divisi tertentu melainkan menggantung pada body atau menggantung di layar secara keseluruhan". Misalnya, ketika ingin menempatkan foto author di pojok kanan atas main-wrapper, tapi ternyata malah berada di pojok kanan atas blog/layar monitor.

Pemecahan Masalah
Untuk memecahkan masalah ini sangat sederhana. Kita hanya melakukan perubahan pada kode css.

Misalkan ada kode HTML

<div id="outer-wrapper">
   <div id="main-wrapper">
      <div id="blog1">
         <div id="elemenmenggantung">
           TEKS ANDA
         </div>
      </div>
   </div>
</div>

Dasar Pertama: Gunakan ABSOLUTE untuk membuat suatu elemen permanen pada area tertentu.

Seperti kita tahu, untuk membuat "TEKS ANDA" menjadi menggantung (TEKS ANDA berada di divisi "elemenmenggantung"), maka kita menggunakan css seperti berikut ini

#elemenmenggantung {
position: absolute;
left: 0;
top: 0;
}

*position: absolute; untuk membuat posisi TEKS ANDA menjadi permanen pada tempat tertentu, tidak terpengaruh pergeseran widget lain.
*left: 0; menempatkan elemen permanent berjarak 0px dari arah kiri.
*top: 0; menempatkan elemen permanent berjarak 0px dari atas.

 Untuk kode di atas sudah tidak masalah karena banyak yang sudah memanfaatkannya. Nah, yang perlu diperhatikan adalah dasar kedua.

Dasar Kedua: Setiap elemen ABSOLUTE akan otomatis mengikuti elemen RELATIVE di atasnya.

Dalam artian seperti kode tadi, kita tulis ulang:

<div id="outer-wrapper">
   <div id="main-wrapper">
      <div id="blog1">
         <div id="elemenmenggantung">
           TEKS ANDA
         </div>
      </div>
   </div>
</div>

jika Anda menggunakan CSS:
#blog1 {
position: relative;
}

maka TEKS ANDA akan absolute/permanent menggantung  pada divisi blog1, berjarak 0px dari kiri blog1 dan berjarak 0px dari atas blog1.

Tapi, jika tidak ditemukan position:relative pada blog1, maka TEKS ANDA akan mencari ke divisi yang di atasnya lagi, pada kode di atas berarti: main-wrapper. Jika main-wrapper memiliki css position:relative maka TEKS ANDA akan menggantung pada main-wrapper. Tapi jika pada main-wrapper tidak ditemukan css position:relative maka TEKS ANDA mencari ke atasnya lagi yakni outer-wrapper. Begitu seterusnya.

Nah, akhirnya terjawab kenapa suatu elemen seringkali justru malah menggantung pada blog secara keseluruhan/pada body/atau berada di pojok monitor. Hal ini karena tidak ditemukan position:relative pada divisi-divisi di atasnya.

Di Akhir...
Bagi Anda sekarang jelas dan mudah, untuk membuat elemen menggantung ingat dua dasar:
Dasar 1: Gunakan ABSOLUTE untuk membuat suatu elemen permanen pada area tertentu.
Dasar 2: Setiap elemen ABSOLUTE akan otomatis mengikuti elemen RELATIVE di atasnya.

Semoga bermanfaat... Blogging is Sharing...

Item Description: Gadget Menggantung Pada Divisi Tertentu