Tutorial Belajar CSS Part 31 – Mengenal CSS Position

Posted on Posted in Tutorial CSS

Dalam tutorial kali ini kita akan membahas mengenai CSS Position, CSS Position digunakan untuk mengatur posisi dari sebuah elemen HTML pada saat ditampilkan. Pada proses pembuatan design web kita bisa membuat beberapa element HTML, dan anda juga harus mengatur bagaimana posisi elemen – elemen tersebut, apakah saling menumpuk, atau saling bersebelahan, nah untuk memfasilitasi hal tersebut CSS memiliki fitur yang dikenal dengan nama CSS Position

Dalam CSS Position terdapat beberapa value yang bisa anda gunakan antara lain :

  • Static
  • Relative
  • Fixed
  • Absolute
  • Sticky

Masing – Masing Value memiliki fungsi yang berbeda dalam hal mengatur position suatu elemen dengan elemen yang lain, kita akan membahasnya satu persatu dalam tutorial kali ini.

 

Position Static

Position Static adalah settingan default posisi dalam elemen HTML, dengan menggunakan position static anda tidak dapat mengatur posisi dari elemen, semisal posisi left,right,top,bottom, coba anda perhatikan skrip HTML dibawah ini :

semisal kita simpan dengan nama position-static.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

  • Maka hasilnya elemen yang ditampilkan mengabaikan bagian dari position seperti pada css kita telah mengatur left (jarak sebelah kiri) adalah 50 pixel tetapi object tetap ditampilkan tanpa ada jarak disebelah kiri, lalu kita juga mengatur top (jarak bagian atas) adalah 100 pixel, tetapi object tetap ditampilkan tanpa ada jarak disebelah atas.

 

 

Position Relative

Berbeda dengan position:static, pada position relative ini anda dapat mengatur posisi dari elemen yang ditampilkan, perhatikan skrip dibawah ini :

semisal kita simpan dengan nama position-relative.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

  • Elemen tersebut ditampilkan dengan posisi 50 pixel dari sebelah kiri karena kita menset left: 50px, dan 100 pixel dari sebelah atas karena kita menset top:100px
  • Selain itu elemen tersebut bisa kita set posisinya karena kita menggunakan position:relative

 

 

Position Fixed

Position Fixed ini sama dengan position relative yaitu bisa kita set untuk bagian dari posisi elemennya, tidak hanya itu saja position fixed memiliki kelebihan untuk menset posisi elemen untuk tidak berubah meskipun dilakukan scroll pada page, contoh untuk penggunaan position fixed yang sering kita temui adalah pada bagian chat box di facebook yang berada pada bagian kanan bawah, meskipun kita scroll posisinya tetap ada disana, nah itu adalah contoh penggunaan dari position fixed, untuk memahami silahkan perhatikan skrip HTML dibawah ini :

Semisal kita simpan dengan nama position-fixed.html, lalu kita buka di browser maka hasilnya adalah :

Lalu saya scroll ke arah bawah…..

Keterangan :

  • Coba perhatikan pada bagian objek yang menggunakan class coba telah kita berikan property position dengan value fixed, lalu silahkan lakukan scroll maka elemen tersebut tetap berada ditempat yang sama meskipun kita lakukan scroll, itu adalah effect dari penggunaan property position dengan value fixed.

 

Position Absolute

Position ini digunakan untuk mengatur posisi sebuah elemen yang ingin menimpa elemen lain, agar  teman – teman lebih memahami konsep position absolute silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama position-absolute.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • untuk elemen yang menggunakan class=”b” berada diatas pada saat kita coba menumpuk 2 elemen, hal tersebut karena kita menggunakan property position dengan value absolute pada class b

 

Position Sticky

Position Sticky memiliki konsep yang hampir mirip dengan position fixed, perbedaannya ada ketika halaman di scroll, ketika halaman di scroll maka objek ini akan berada pada bagian atas halaman web, untuk lebih memahami silahkan perhatikan skrip dibawah ini :

semisal kita simpan dengan nama position-sticky.html, lalu kita coba buka di browser maka hasilnya adalah :

Penjelasan :

  • pada gambar pertama objek yang menggunakan position-sticky yang menggunakan warna background merah mudah itu, ditampilkan seperti halnya elemen yang lain.
  • Pada gambar kedua kita coba scroll dari halaman web, akhirnya objek yang menggunakan position:sticky tersebut berada pada bagian atas dari sebuah elemen tanpa ada jarak dibagian atas, hal tersebut dikarenakan kita set bagian property top dengan nilai 0

 

 

Mengenal Istilah Overlapping Element

Konsep Overlapping Element ini digunakan untuk membuat elemen yang saling menumpuk, dan anda bisa mengatur posisi dari tumpukannya.
Property yang kita gunakan adalah z-index, coba anda perhatikan skrip dibawah ini :

 

semisal kita simpan dengan nama overlapping-element.html, lalu kita buka di browser, maka hasilnya :

Keterangan :

  • gambar warung belajar ditampilkan di bagian belakang dari text, hal tersebut karena kita memberikan property z-index: -1; pada bagian tag img

Nah banyak fitur CSS yang digunakan untuk mengatur dari posisi elemen, anda dapat mengatur posisi elemen sesuai yang kebutuhan dan menyesuaikan dari nilai property position.
Jika ada yang ingin didiskusikan silahkan di kolom komentar, terima kasih sampai jumpa di tutorial selanjutnya