POSITION FIXED

Properti CSS Position: fixed adalah cara praktis dan efektif untuk membuat elemen pada halaman web tetap berada dalam posisi tertentu di layar, tidak peduli seberapa jauh pengguna menggulir halaman. Biasanya, ini digunakan untuk elemen penting seperti menu navigasi atau panel aksi.

Cara Kerja Position: fixed

Ketika elemen diberikan Position: fixed, elemen tersebut diletakkan relatif terhadap jendela browser, bukan elemen induk. Jadi, meskipun pengguna menggulir halaman, elemen dengan Position: fixed akan tetap berada pada posisi yang sama.

    div {
        position: fixed;
        bottom: 0;
        right: 0;
    }

Menentukan Posisi Elemen

Untuk menentukan posisi elemen yang menggunakan Position: fixed, kamu dapat menggunakan properti CSS tambahan seperti top, right, bottom, dan left. Nilai dari properti ini ditentukan berdasarkan jarak dari tepi jendela browser.

Contoh

Berikut adalah contoh penggunaan Position: fixed di CSS:

nav {
    position: fixed;
    top: 0;
    width: 100%;
}

Dalam contoh di atas, elemen nav akan selalu tetap di bagian atas jendela browser, tidak peduli seberapa jauh pengguna scrolling halaman.

Perhatian!

Sangat penting untuk diingat bahwa menggunakan Position: fixed dapat mempengaruhi alur normal dari halaman kamu. Elemen dengan posisi tetap tidak memiliki ruang yang dialokasikan untuk mereka dalam tata letak normal halaman, jadi elemen lain mungkin akan merespons seolah-olah elemen dengan posisi tetap tidak ada.