Penyajian visual dalam web design tidak hanya bergantung pada elemen-elemen yang ada, tetapi juga bagaimana elemen-elemen tersebut ditempatkan dan berinteraksi satu sama lain. Di sinilah peran penting CSS position.

Position berfungsi untuk mengatur, memanipulasi, dan mengoptimalkan penempatan elemen dengan presisi, menciptakan tampilan yang harmonis dan responsif.

Dengan kata lain, CSS position akan mengendalikan bagaimana dan di mana elemen-elemen ditempatkan di dalam halaman web. Properti ini memberikan fleksibilitas dalam menentukan posisi elemen sesuai konteksnya, baik itu relatif terhadap elemen lain, relatif terhadap tab browser, atau berdasarkan normal flow.

Yuk, kuasai lebih dalam tentang CSS position di artikel ini! 

Macam-macam Positioning dengan CSS

Pada umumnya, ada beberapa jenis positioning dalam CSS, yaitu:

• Static position: jenis ini adalah posisi bawaan untuk semua elemen web. Jika kamu tidak menentukan jenis posisi apa pun, elemen tersebut akan memiliki static position secara default.
• Relative position: saat kamu menetapkan elemen dengan relative position, kamu dapat menggerakkannya dari posisi asli tanpa mengganggu elemen lain di sekitarnya.
• Absolute position: menggunakan absolute position berarti kamu mengambil elemen keluar dari normal flow dan menempatkannya tepat di lokasi yang kamu inginkan.
• Fixed position: elemen dengan fixed position akan tetap berada di posisi yang sama, bahkan ketika audiens men-scroll halaman.
• Sticky position: jenis ini adalah kombinasi dari posisi relative dan fixed. Elemen akan bergerak seperti biasa sampai mencapai titik tertentu, lalu akan "menempel" seperti fixed position.

Sekarang, mari kita bahas lebih detail tentang keempat jenis positioning tersebut.

Static Position

Static position adalah jenis posisi bawaan untuk semua elemen HTML. Jika kamu tidak menentukan properti "position" untuk elemen, secara otomatis elemen tersebut akan memiliki static position.

Dalam mode ini, elemen akan ditampilkan sesuai dengan normal flow, yaitu satu setelah yang lainnya sudah sesuai dengan urutan kode HTML.

Sebenarnya, kamu tidak perlu secara eksplisit menetapkan elemen dengan position: static; karena ini adalah nilai bawaan. Namun, jika sebelumnya kamu sudah menentukan jenis posisi lain dan ingin mengembalikannya ke posisi asli, kamu dapat melakukannya dengan menetapkan position: static;.

Contoh penggunaan static position

Kamu memiliki halaman web dengan tiga paragraf teks. Jika kamu tidak menentukan posisi apa pun untuk paragraf-paragraf ini, ketiganya akan ditampilkan satu setelah yang lainnya, dari atas ke bawah, sesuai dengan urutan mereka dalam kode HTML:

Tanpa menambahkan kode CSS tambahan, ketiga paragraf di atas memiliki static position dan akan ditampilkan sesuai normal flow.

Relative Position 

Relative position memungkinkan kita untuk menggeser elemen dari posisi asli tanpa mengubah posisi elemen lain di sekitarnya. Elemen dengan relative position masih mempertahankan ruang asli dalam normal flow, tetapi dapat "digerakkan" relatif terhadap posisi aslinya.

Untuk menggunakan relative position, tentukan properti position elemen menjadi relative. Kemudian, gunakan properti top, bottom, left, dan right untuk menggeser elemen dari posisi asl. Nilai positif akan menggeser elemen ke bawah (untuk top) atau ke kanan (untuk left), sedangkan nilai negatif akan menggeser ke atas atau ke kiri.

Contoh penggunaan relative position

Kamu punya kotak teks berisi quotes. Di sudut kanan atas kotak, kamu ingin menambahkan icon kutipan. Namun, icon ini sedikit menonjol keluar dari kotak, sehingga kamu menggunakan relative position.

Kode HTML:

Kode CSS:

Dalam contoh di atas, icon kutipan ditempatkan dengan relative position, lalu digeser 10px ke atas dan 10px ke kiri, membuatnya menonjol sedikit dari kotak kutipan.

Absolute Position 

Absolute position memungkinkan elemen untuk ditempatkan dengan presisi relatif terhadap elemen pendahulunya yang terdekat dengan posisi non-static. Salah satu kegunaan utama dari posisi absolute adalah memastikan elemen berada di lapisan terdepan, sehingga elemen tersebut muncul di atas elemen lain di halaman.

Elemen dengan absolute position dikeluarkan dari normal flow yang berarti elemen tersebut tidak memengaruhi posisi elemen lain di sekitarnya.

Ketika kamu menetapkan elemen dengan position: absolute;, kamu dapat menggunakan properti top, bottom, left, dan right untuk menentukan posisi elemen tersebut. Posisi ini akan relatif terhadap elemen pendahulunya yang terdekat dengan posisi non-static (seperti relative, absolute, atau fixed). Jika tidak ada elemen yang mendahului posisi tersebut, elemen akan ditempatkan relatif terhadap halaman web itu sendiri.

Contoh penggunaan absolute position

Kamu ingin menampilkan tooltip ketika audiens mengarahkan kursor ke icon tertentu. Tooltip ini dapat ditempatkan dengan absolute position terhadap ikon.

Kode HTML:

Kode CSS:

Fixed Position 

Fixed position ideal digunakan untuk elemen seperti header atau navbar yang ingin selalu ditampilkan di bagian atas layar, tidak peduli seberapa jauh audiens men-scroll halaman. Dengan menggunakan position: fixed; elemen tersebut akan "ditanamkan" pada lokasi tertentu di layar, memastikan aksesibilitas yang konstan kepada audiens.

Elemen dengan fixed position tidak berada dalam normal flow, sehingga tidak memengaruhi posisi elemen lain di halaman.

Ketika kamu menetapkan elemen dengan position: fixed;, kamu bisa menggunakan properti top, bottom, left, dan right untuk menentukan posisi elemen tersebut relatif terhadap tab browser. Elemen akan tetap berada di posisi tersebut, bahkan saat halaman di-scroll.

Contoh penggunaan fixed position

Salah satu penggunaan paling populer dari fixed position adalah menu navigasi yang tetap berada di bagian atas layar saat audiens men-scroll halaman.

Kode HTML:

Kode CSS:

Sticky Position

Sticky position adalah kombinasi unik dari posisi relative dan fixed. Elemen dengan sticky position akan berperilaku seperti elemen dengan posisi relative dalam konteksnya, tetapi ketika audiens men-scroll halaman dan elemen tersebut mencapai titik tertentu yang ditentukan, elemen akan "menempel" dan mulai berperilaku seperti elemen dengan posisi fixed.

FAQ (Frequently Asked Question)

Apa itu "z-index" dan bagaimana hubungannya dengan "position"?

"z-index" adalah properti CSS yang mengontrol urutan tumpukan elemen di sumbu z (kedalaman). Properti ini khususnya berlaku untuk elemen dengan posisi seperti absolute dan relative.

Untuk memastikan elemen tertentu muncul di lapisan terdepan, kamu harus memberikannya nilai "z-index" yang lebih besar dibandingkan elemen lainnya. Sehingga, dengan menggunakan "z-index", kamu dapat lebih mudah mengontrol elemen mana yang harus muncul di atas atau di bawah elemen lainnya.

Penutup

CSS position adalah instrumen yang membantu web developer mengatur dan memanipulasi penempatan elemen di halaman web dengan presisi. Mulai dari static, relative, absolute, dan fixed position, masing-masing menawarkan kontrol unik atas elemen dalam konteks yang berbeda.

Melalui pemahaman mendalam tentang masing-masing jenis posisi ini, kamu dapat menciptakan tampilan yang dinamis, responsif, dan user-friendly.