POSITION CSS - MENGATUR POSISI ELEMEN DENGAN DETAIL

Salah satu ilmu penting yang cukup bikin pusing saat belajar CSS adalah position. Kamu akan melihat kelima nilai position ini, yaitu static, relative, absolute, fixed dan sticky beserta demo yang bisa kamu lihat dan uji langsung!

Apa itu position pada CSS ?

Position pada CSS adalah properti yang digunakan untuk mengatur posisi elemen HTML. Jangan tertukar antara “elemen” dan “layout”.

Kalau mengatur layout secara kesuluruhan bisa menggunakan flexbox atau grid. Kalau mengatur posisi elemen HTML secara detail, bisa menggunakan position.

Kenapa penting mengerti position ?

• Mengontrol posisi elemen secara detail
• Membuat desain kompleks jadi mungkin dibuat kodenya
• Membuat UX (User Experience) lebih baik

Kalau kamu ingin belajar membuat website dari nol, ikuti kelas membuat website dengan HTML dan CSS

Tabel nilai properti position position CSS

Penjelasan properti position CSS

Kita akan menggali nilai posisi ini dengan contohnya masing-masing.

Position Static

Nilai static adalah nilai default yang berarti tanpa didefenisikan, semua elemen akan menggunakan nilai ini.

Position Relative

Nilai relative berarti elemen akan ditempatkan relatif terhadap posisinya sendiri.

• Ia tetap pada aliran normal dokumen, tapi kita bisa mengatur posisinya dengan properti top, right, bottom, atau left.
• Contoh jika kita mengatur top: 10px, maka elemen akan bergerak 10px dari atas.
• Elemen lain tidak akan bergerak, hanya elemen yang kita atur yang bergerak.

Position Absolute

Nilai absolute berarti elemen akan ditempatkan secara absolut, namun relatif terhadap elemen pembungkus pertama non-static terdekat.

• Elemen yang menggunakan nilai absolute tidak akan memengaruhi posisi elemen lainnya.
• Elemen yang menggunakan nilai absolute akan bergerak relatif terhadap elemen pembungkusnya.

Position Fixed

Nilai fixed berarti elemen akan ditempatkan relatif terhadap jendela viewport, sehingga tetap di posisi tertentu bahkan saat pengguna menggulir halaman.

• Elemen yang menggunakan nilai fixed tidak akan memengaruhi posisi elemen lainnya.
• Elemen yang menggunakan nilai fixed akan tetap di posisi tertentu bahkan saat pengguna menggulir(scroll) halaman.
• Elemen lain akan menganggap elemen yang menggunakan nilai fixed tidak ada. Sehingga posisinya akan terisi oleh elemen berikutnya, karena itu penting member margin/jarak yang tepat.

Position Sticky

Nilai sticky berarti elemen “menempel” pada posisi tertentu selama pengguliran, berfungsi seperti kombinasi dari relative dan fixed.

• Ia akan tampak seperti elemen biasa, sampai discroll
• Saat scroll, makan nilai top, right, bottom, atau left akan dihitung dari posisi normal.

Kesimpulan

Itu dia teman-teman penjelasan mengenai position pada CSS. Semoga bermanfaat ya. Kalau ada pertanyaan, silahkan tulis di kolom komentar!

Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas