Position CSS - Mengatur posisi elemen dengan detail

Daftar Isi:

Apa itu position pada CSS ?
Kenapa penting mengerti positi...
Tabel nilai properti position ...
Penjelasan properti position C...
Kesimpulan

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

Nilai	Penjelasan
Static	Ini adalah nilai bawaan. Elemen ditempatkan sesuai dengan aliran normal dokumen.
Relative	Elemen ditempatkan relatif terhadap posisinya sendiri, memungkinkan pengguna mengatur posisi dengan properti `top`, `right`, `bottom`, atau `left`.
Absolute	Elemen ditempatkan secara absolut relatif terhadap elemen pembungkus pertama non-static terdekat. Ini memungkinkan penciptaan layout yang lebih kompleks dan kontrol yang lebih besar atas posisi elemen.
Fixed	Elemen ditempatkan relatif terhadap jendela viewport, sehingga tetap di posisi tertentu bahkan saat pengguna menggulir halaman.
Sticky	Elemen “menempel” pada posisi tertentu selama pengguliran, berfungsi seperti kombinasi dari `relative` dan `fixed`.

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

POSITION CSS - MENGATUR POSISI ELEMEN DENGAN DETAIL