Position CSS – Mengatur posisi elemen dengan detail

Panduan lengkap Kepada mengerti bagaimana position pada CSS bekerja. Terdapat static, relative, absolute, fixed dan sticky.

Daftar Isi:

Salah satu ilmu Krusial yang cukup bikin pusing Ketika belajar CSS adalah position. Engkau akan Menyaksikan kelima nilai position ini, Adalah static, relative, absolute, fixed dan sticky beserta demo yang Pandai Engkau lihat dan uji langsung!

Apa itu position pada CSS ?

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

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

Kenapa Krusial mengerti position ?

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

Kalau Engkau Mau belajar Membangun website dari Nihil, ikuti kelas Membangun website dengan HTML dan CSS

Tabel nilai properti position position CSS

Nilai	Penjelasan
Static	Ini adalah nilai bawaan. Elemen ditempatkan sesuai dengan Aliran normal Arsip.
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 Ketika 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, Seluruh elemen akan menggunakan nilai ini.

Position Relative

Nilai relative berarti elemen akan ditempatkan relatif terhadap posisinya sendiri.

• Ia tetap pada Aliran normal Arsip, tapi kita Pandai mengatur posisinya dengan properti top, right, bottom, atau left.
• Teladan Apabila kita mengatur top: 10px, maka elemen akan bergerak 10px dari atas.
• Elemen lain Kagak akan bergerak, hanya elemen yang kita atur yang bergerak.

Position Absolute

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

• Elemen yang menggunakan nilai absolute Kagak 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 Ketika pengguna menggulir halaman.

• Elemen yang menggunakan nilai fixed Kagak akan memengaruhi posisi elemen lainnya.
• Elemen yang menggunakan nilai fixed akan tetap di posisi tertentu bahkan Ketika pengguna menggulir(scroll) halaman.
• Elemen lain akan menganggap elemen yang menggunakan nilai fixed Kagak Terdapat. Sehingga posisinya akan terisi oleh elemen berikutnya, karena itu Krusial member margin/jarak yang Betul.

Position Sticky

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

• Ia akan tampak seperti elemen Standar, Tamat discroll
• Ketika scroll, makan nilai top, right, bottom, atau left akan dihitung dari posisi normal.

Konklusi

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