Tetapkan elemen selalu terlihat saat menggulir halaman web pada HTML dengan position fixed CSS

null

15 min red

September 22, 2025

Position: fixed pada CSS merupakan salah satu properti penting yang memengaruhi tata letak elemen dalam halaman web. Properti ini membuat elemen selalu berada di posisi tertentu pada viewport, bahkan ketika pengguna menggulir halaman. Menurut Robbins (2018), kehadiran properti ini menjawab kebutuhan desain antarmuka yang dinamis dan interaktif. Penggunaan fixed sering dijumpai pada navigasi, tombol aksi cepat, atau notifikasi. Potensinya sangat besar untuk menjaga visibilitas elemen penting yang harus selalu tersedia. Hal ini membuat pengalaman pengguna lebih efisien dan konsisten.

Penerapan position: fixed dapat mempermudah akses terhadap fitur penting dalam sebuah website. Sebagai contoh, tombol kembali ke atas atau “back to top” biasanya selalu terlihat dengan memanfaatkan properti ini. Menurut Nielsen (2020), aksesibilitas yang baik bergantung pada kemampuan pengguna menemukan fungsi utama tanpa hambatan. Dengan fixed, elemen kunci bisa ditampilkan di mana saja tanpa hilang saat pengguna menggulir konten panjang. Hal ini juga membantu mengurangi friksi dalam interaksi pengguna. Oleh karena itu, fixed tidak hanya berguna tetapi juga strategis dalam pengalaman digital.

Selain itu, position: fixed membuka ruang untuk inovasi dalam desain modern. Sidebar interaktif, menu navigasi, hingga iklan digital sering memanfaatkan properti ini. Menurut Tullis dan Albert (2013), tampilan yang selalu terlihat meningkatkan efektivitas dalam penyampaian informasi. Bahkan dalam konteks mobile, fixed membantu menjaga elemen penting tetap dapat diakses. Potensi ini memperlihatkan bahwa fixed bukan sekadar fitur teknis, tetapi juga alat strategis dalam komunikasi visual. Dengan demikian, fixed merupakan properti yang mendukung evolusi desain web modern.

Namun, penggunaan fixed juga menuntut perhatian ekstra agar tidak mengganggu pengalaman pengguna. Elemen yang terlalu besar atau menutupi konten dapat membuat frustrasi. Menurut Wroblewski (2011), setiap elemen tetap harus mendukung tujuan utama, yaitu menyampaikan konten dengan jelas. Fixed yang tidak dirancang dengan baik bisa menurunkan kualitas interaksi dan membuat situs terasa berat. Oleh karena itu, perlu ada keseimbangan antara manfaat dan risiko. Dengan perencanaan tepat, fixed bisa menjadi kunci keberhasilan desain antarmuka.

2. Kenapa Penting

Menjamin Aksesibilitas Elemen Penting

Aksesibilitas menjadi alasan utama mengapa position: fixed penting. Dengan properti ini, elemen seperti navigasi utama atau tombol aksi cepat selalu terlihat. Menurut Nielsen (2020), pengguna lebih nyaman ketika fungsi utama selalu dalam jangkauan. Hal ini mempersingkat waktu interaksi dan mengurangi beban kognitif. Aksesibilitas yang konsisten memperkuat kepuasan pengguna secara keseluruhan.

Selain itu, fixed membantu pengguna dalam konteks halaman panjang. Misalnya, ketika membaca artikel atau laporan, tombol kembali ke atas tetap tersedia. Robbins (2018) menekankan bahwa akses mudah ini meningkatkan efisiensi dalam navigasi. Dengan demikian, fixed berkontribusi pada alur kerja yang lebih lancar. Aksesibilitas ini menjadikan fixed sangat penting dalam desain modern.

Namun, aksesibilitas juga harus disertai perencanaan visual yang baik. Elemen fixed tidak boleh menutupi konten penting. Menurut Lidwell, Holden, dan Butler (2010), desain yang baik harus memadukan fungsionalitas dengan estetika. Oleh karena itu, penggunaan fixed harus memperhatikan konteks tata letak. Dengan cara ini, aksesibilitas yang ditawarkan tetap selaras dengan pengalaman pengguna.

Mendukung Navigasi yang Konsisten

Navigasi yang konsisten adalah faktor kedua yang membuat fixed begitu penting. Elemen navigasi utama sering ditempatkan menggunakan position: fixed. Menurut Marcotte (2011), konsistensi navigasi meningkatkan kepercayaan pengguna terhadap antarmuka. Dengan navigasi tetap terlihat, pengguna tidak perlu menggulir kembali ke atas halaman. Hal ini membuat perjalanan dalam situs menjadi lebih efisien.

Navigasi konsisten juga sangat berguna dalam situs besar dengan banyak halaman. Robbins (2018) menyebut bahwa fixed membantu pengguna memahami struktur tanpa tersesat. Dengan menu yang selalu terlihat, interaksi menjadi lebih sederhana. Konsistensi ini memberikan kesan profesional pada desain. Fixed, dalam hal ini, berperan penting menjaga stabilitas navigasi.

Namun, konsistensi harus tetap mempertimbangkan keterbacaan. Navigasi yang terlalu besar bisa mengurangi ruang konten. Menurut Tullis dan Albert (2013), ruang layar harus dioptimalkan untuk informasi utama. Oleh karena itu, desain navigasi fixed sebaiknya sederhana dan minimalis. Dengan begitu, navigasi konsisten tidak mengorbankan kenyamanan membaca.

Memperkuat Branding dan Identitas Visual

Alasan ketiga adalah peran fixed dalam memperkuat branding. Logo, identitas perusahaan, atau ikon layanan sering ditempatkan menggunakan fixed. Menurut Lidwell et al. (2010), konsistensi visual memperkuat asosiasi merek di benak pengguna. Dengan logo selalu terlihat, brand awareness meningkat secara signifikan. Fixed dalam hal ini berfungsi sebagai alat komunikasi yang strategis.

Selain itu, elemen visual fixed dapat digunakan untuk promosi atau pengingat layanan. Wroblewski (2011) menekankan bahwa branding visual yang konsisten menciptakan kesan positif. Elemen seperti banner atau notifikasi tetap berada pada posisi yang mudah terlihat. Hal ini membantu menjaga perhatian pengguna pada pesan penting. Fixed dengan demikian mendukung strategi pemasaran.

Namun, branding tidak boleh berlebihan sehingga mengganggu konten. Robbins (2018) memperingatkan bahwa elemen fixed yang menutupi informasi utama dapat mengurangi efektivitas. Oleh karena itu, branding melalui fixed harus seimbang dengan fungsi utama halaman. Dengan pengaturan yang tepat, branding bisa berjalan seiring dengan kenyamanan pengguna.

3. Konsep Dasar

Position: fixed bekerja dengan cara membuat elemen tetap berada pada posisi relatif terhadap viewport. Artinya, meskipun pengguna menggulir halaman, elemen tersebut tidak bergerak. Menurut Robbins (2018), hal ini berbeda dengan absolute yang bergantung pada parent container. Fixed selalu merujuk langsung pada layar pengguna. Hal ini menjadikan fixed sangat berguna untuk elemen yang harus selalu terlihat.

Konsep ini dapat dipahami lebih mudah dengan contoh kode sederhana.

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

Kode di atas membuat header menempel di bagian atas layar sepanjang waktu. Menurut Nielsen (2020), pendekatan ini sering digunakan untuk navigasi utama. Dengan fixed, elemen penting dapat terus mendampingi pengguna. Konsep ini sederhana tetapi sangat kuat.

Selain itu, fixed bekerja sama dengan properti lain seperti z-index. Elemen fixed perlu ditempatkan di atas elemen lain agar tidak tertutup. Robbins (2018) menyebut bahwa kombinasi ini memastikan visibilitas elemen tetap terjaga. Tanpa z-index, elemen fixed mungkin tidak terlihat karena tertimpa konten. Oleh karena itu, konsep dasar fixed harus dipahami secara menyeluruh.

Namun, perlu diperhatikan bahwa penggunaan fixed dapat memengaruhi pengalaman pengguna jika berlebihan. Menurut Tullis dan Albert (2013), elemen yang terlalu besar akan mengurangi ruang konten. Oleh karena itu, desain harus menyeimbangkan antara kebutuhan fungsional dan kenyamanan visual. Dengan pemahaman dasar ini, fixed dapat digunakan secara efektif dalam berbagai situasi.

4. Jenis dan Contoh

Header Tetap di Atas

Salah satu jenis penggunaan position: fixed yang paling umum adalah pada header. Header tetap berada di bagian atas layar meskipun pengguna menggulir halaman. Menurut Robbins (2018), hal ini menjaga agar navigasi selalu tersedia tanpa harus kembali ke atas. Dengan demikian, header fixed sangat efektif untuk meningkatkan efisiensi navigasi. Hal ini juga menciptakan pengalaman yang konsisten dalam interaksi pengguna.

Contoh kode sederhana untuk header fixed adalah sebagai berikut:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 10px;
}

Kode ini memastikan header selalu menempel di bagian atas viewport. Menurut Nielsen (2020), implementasi seperti ini membantu pengguna fokus pada konten tanpa kehilangan orientasi. Header tetap terlihat sehingga memudahkan berpindah halaman. Efisiensi ini merupakan alasan utama mengapa fixed banyak dipilih.

Secara naratif, penggunaan header fixed juga memperkuat branding. Logo atau nama perusahaan dapat ditampilkan konsisten di bagian atas. Tullis dan Albert (2013) menyebut bahwa konsistensi visual meningkatkan kepercayaan pengguna. Dengan header fixed, brand identity selalu dalam jangkauan. Hal ini menambah nilai strategis penggunaan fixed dalam desain web.

Sidebar Navigasi Tetap

Jenis lain dari fixed adalah sidebar navigasi yang menempel di sisi kiri atau kanan layar. Sidebar ini membantu pengguna untuk berpindah bagian tanpa perlu menggulir panjang. Menurut Lidwell, Holden, dan Butler (2010), navigasi lateral seperti ini memperkuat struktur informasi. Sidebar tetap terlihat sehingga memudahkan orientasi pengguna. Dengan demikian, sidebar fixed sangat cocok untuk situs dengan konten kompleks.

Contoh kode sederhana sidebar fixed:

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: #444;
  color: white;
  padding: 20px;
}

Kode di atas membuat sidebar tetap berada di sisi kiri layar. Robbins (2018) menekankan bahwa sidebar seperti ini sangat efektif untuk menampilkan menu kategori. Elemen selalu terlihat dan tidak terpengaruh oleh scroll. Hal ini meningkatkan aksesibilitas dan mempercepat navigasi.

Secara naratif, sidebar fixed juga mendukung kejelasan arsitektur informasi. Pengguna dapat memahami struktur situs hanya dengan melihat sidebar. Menurut Nielsen (2020), hal ini mengurangi kebingungan dalam interaksi. Sidebar tetap memastikan navigasi selalu tersedia. Dengan demikian, sidebar fixed merupakan implementasi strategis dalam desain web.

Tombol Aksi Cepat (Floating Button)

Jenis berikutnya adalah tombol aksi cepat yang sering disebut floating button. Tombol ini biasanya muncul di pojok layar dan tetap terlihat sepanjang waktu. Wroblewski (2011) menjelaskan bahwa tombol aksi cepat meningkatkan efektivitas dalam penggunaan aplikasi. Dengan fixed, tombol seperti “back to top” atau “chat support” selalu dapat diakses. Hal ini sangat membantu dalam konteks interaksi yang cepat.

Contoh kode floating button:

.button-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007BFF;
  color: white;
  padding: 15px;
  border-radius: 50%;
}

Kode ini membuat tombol melayang di pojok kanan bawah layar. Robbins (2018) menyebut bahwa desain ini sangat berguna pada halaman panjang. Tombol tetap terlihat dan mudah diakses kapan saja. Hal ini mengurangi usaha pengguna untuk melakukan navigasi manual.

Secara naratif, floating button juga mendukung aksesibilitas layanan. Misalnya, tombol bantuan selalu ada untuk mendukung pengguna. Nielsen (2020) menekankan bahwa akses langsung meningkatkan kepuasan pengguna. Dengan demikian, floating button fixed menjadi elemen penting dalam desain yang ramah pengguna.

5. Implementasi dari Setiap Contoh

Implementasi Header Tetap di Atas

Implementasi position: fixed pada header membutuhkan perhatian pada ruang di bawahnya. Karena header fixed menempel di atas, konten utama bisa tertutup bila tidak diberi margin. Robbins (2018) menyarankan penambahan margin-top sesuai tinggi header. Hal ini menjaga konten tetap terlihat dengan baik. Implementasi ini membuat tata letak lebih rapi dan tidak membingungkan pengguna.

Contoh implementasi lengkap:

<header>
  <h1>Website Fixed Header</h1>
</header>
<main>
  <p>Konten halaman panjang di sini...</p>
</main>

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: white;
  padding: 10px;
}
main {
  margin-top: 70px;
}

Dengan kode di atas, header selalu terlihat di atas. Penambahan margin-top pada <main> menghindari tumpang tindih konten. Nielsen (2020) menyebut bahwa tata letak yang bersih memperkuat pengalaman pengguna. Hal ini menjadi contoh implementasi praktis dari fixed header.

Implementasi Sidebar Navigasi Tetap

Sidebar fixed perlu dirancang agar tidak mengganggu konten utama. Biasanya, konten diberi margin-left sesuai lebar sidebar. Robbins (2018) menekankan pentingnya keseimbangan ruang agar pengguna nyaman membaca. Sidebar fixed mempermudah akses navigasi namun tidak boleh mendominasi layar. Dengan pengaturan ini, struktur situs menjadi lebih jelas.

Contoh implementasi lengkap:

<div class="sidebar">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</div>
<div class="content">
  <p>Konten utama halaman...</p>
</div>

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: #444;
  color: white;
  padding: 20px;
}
.content {
  margin-left: 220px;
  padding: 20px;
}

Dengan pengaturan di atas, sidebar selalu terlihat di sisi kiri. Konten utama bergeser ke kanan sehingga tidak tertutup. Lidwell, Holden, dan Butler (2010) menyebut bahwa navigasi lateral yang jelas membantu pengguna memahami konteks. Implementasi ini mencerminkan kombinasi aksesibilitas dan estetika.

Implementasi Tombol Aksi Cepat (Floating Button)

Floating button fixed sebaiknya dirancang sederhana agar tidak mengganggu tampilan. Biasanya tombol ini berbentuk bulat kecil di pojok layar. Robbins (2018) menekankan bahwa elemen interaktif perlu kontras namun tidak berlebihan. Implementasi floating button membantu pengguna melakukan aksi penting secara instan. Hal ini sangat efektif untuk navigasi cepat.

Contoh implementasi lengkap:

<button class="button-fixed">↑</button>
<main>
  <p>Konten halaman sangat panjang...</p>
</main>

.button-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007BFF;
  color: white;
  padding: 15px;
  border-radius: 50%;
  border: none;
  font-size: 18px;
}

Dengan kode di atas, tombol melayang di pojok kanan bawah. Tombol selalu terlihat saat pengguna menggulir halaman. Wroblewski (2011) menekankan bahwa fitur ini mendukung efisiensi interaksi. Implementasi floating button fixed menjadi solusi navigasi cepat yang ramah pengguna.

6. Kesalahan dalam Penggunaan position: fixed

Mengabaikan Ruang untuk Konten yang Tertutup

Kesalahan umum pertama adalah tidak memberikan ruang pada konten utama ketika elemen fixed digunakan. Ketika header atau sidebar diposisikan dengan position: fixed, elemen tersebut tetap berada di layar dan bisa menutupi bagian konten. Robbins (2018) menekankan bahwa tata letak harus mempertimbangkan keterbacaan sebagai prioritas utama. Jika pengguna tidak bisa melihat konten karena tertutup, maka pengalaman navigasi menjadi buruk. Oleh karena itu, margin atau padding tambahan harus disiapkan agar layout tetap seimbang.

Contoh salah:

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: white;
}
main {
  /* Tidak ada margin-top */
}

Pada contoh ini, konten utama akan tertutup oleh header karena tidak ada margin-top. Hal ini mengurangi aksesibilitas informasi.

Contoh benar:

main {
  margin-top: 70px; /* Ruang tambahan */
}

Dengan tambahan ini, konten bergeser ke bawah sehingga tetap terlihat. Nielsen (2020) menyatakan bahwa keterlihatan konten adalah faktor penting dalam kegunaan situs.

Menggunakan Fixed pada Elemen yang Tidak Relevan

Kesalahan lain adalah menjadikan elemen yang tidak perlu menjadi fixed. Misalnya, membuat semua gambar atau paragraf menempel di layar sepanjang waktu. Marcotte (2011) menyebutkan bahwa desain responsif harus memprioritaskan elemen yang mendukung tujuan navigasi. Jika terlalu banyak elemen fixed, pengguna akan merasa terganggu. Elemen fixed harus digunakan hanya untuk komponen penting seperti navigasi, header, atau tombol aksi cepat.

Contoh salah:

img {
  position: fixed;
  top: 0;
  left: 0;
}

Kode ini akan membuat gambar menempel di layar dan menutupi semua konten lain. Hal ini jelas tidak memberikan manfaat navigasi.

Contoh benar:

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

Dengan kode ini, hanya elemen penting yang dibuat fixed. Lidwell, Holden, dan Butler (2010) menekankan bahwa desain yang baik menonjolkan fungsi tanpa mengorbankan kenyamanan pengguna.

Lupa Menguji di Berbagai Ukuran Layar

Kesalahan ketiga adalah tidak menguji elemen fixed di berbagai ukuran layar. Pada layar kecil seperti ponsel, elemen fixed yang terlalu besar bisa menghabiskan ruang konten. Wroblewski (2011) menekankan bahwa desain mobile-first harus mempertimbangkan keterbatasan ruang layar. Jika elemen fixed tidak disesuaikan, pengguna akan kesulitan membaca konten. Oleh karena itu, pengembang perlu menambahkan media query untuk mengontrol ukuran elemen fixed.

Contoh salah:

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 150px;
}

Pada layar ponsel kecil, header setinggi 150px akan menutupi hampir setengah layar. Ini sangat mengganggu keterbacaan konten.

Contoh benar:

@media (max-width: 600px) {
  header {
    height: 60px;
  }
}

Dengan media query, ukuran header disesuaikan dengan lebar layar. Robbins (2018) menjelaskan bahwa fleksibilitas dalam desain memastikan konsistensi pengalaman pengguna.

Tabel Perbandingan Kesalahan dan Solusi

7. Best Practice dalam Penggunaan position: fixed

Gunakan Hanya untuk Elemen yang Paling Penting

Elemen dengan position: fixed sebaiknya terbatas pada bagian navigasi, header, footer, atau tombol aksi yang benar-benar sering digunakan. Nielsen (2020) menjelaskan bahwa fokus desain harus pada kemudahan akses elemen utama yang mendukung interaksi. Jika semua elemen dibuat fixed, layar akan terlihat penuh dan membingungkan. Dengan memilih elemen penting, halaman akan tetap rapi dan pengguna merasa lebih nyaman. Robbins (2018) menambahkan bahwa prioritas visual harus diarahkan pada elemen yang meningkatkan pengalaman pengguna.

Selain itu, penggunaan fixed pada elemen yang tidak relevan dapat mengurangi ruang konten utama. Marcotte (2011) menekankan bahwa ruang kosong adalah bagian penting dari desain untuk mendukung keterbacaan. Jadi, semakin sedikit elemen fixed yang digunakan, semakin baik alur interaksi pengguna. Prinsip ini membantu menjaga keseimbangan antara estetika dan fungsi.

Pada praktik terbaik, pengembang harus selalu melakukan evaluasi sebelum menetapkan elemen fixed. Lidwell, Holden, dan Butler (2010) menyatakan bahwa keputusan desain harus berbasis fungsi, bukan sekadar estetika. Hal ini berarti hanya elemen dengan nilai tinggi dalam navigasi atau branding yang sebaiknya dijadikan fixed. Dengan begitu, desain web menjadi lebih terarah dan konsisten.

Sesuaikan dengan Ukuran Layar

Menggunakan position: fixed tanpa mempertimbangkan berbagai ukuran layar adalah kesalahan fatal. Wroblewski (2011) menekankan pentingnya pendekatan mobile-first dalam desain modern. Elemen fixed yang terlihat proporsional di desktop bisa menjadi terlalu besar di perangkat mobile. Oleh karena itu, penggunaan media query wajib untuk menjaga konsistensi tampilan di semua perangkat.

Ketika mengatur elemen fixed di layar kecil, sebaiknya mengurangi tinggi atau lebar elemen. Robbins (2018) menjelaskan bahwa keterbacaan dan aksesibilitas adalah kunci utama dalam pengalaman pengguna. Elemen fixed yang menutupi konten akan membuat pengguna frustasi. Dengan mengoptimalkan ukuran, pengguna bisa tetap bernavigasi dengan lancar.

Selain ukuran, posisi juga penting untuk diperhatikan di perangkat yang berbeda. Misalnya, tombol aksi cepat di mobile biasanya ditempatkan di bawah untuk akses mudah dengan jempol. Lidwell et al. (2010) menekankan bahwa ergonomi interaksi adalah faktor penting dalam desain antarmuka. Hal ini menunjukkan bahwa penggunaan fixed harus kontekstual, bukan seragam di semua layar.

Uji Konsistensi di Berbagai Browser dan Perangkat

Salah satu praktik terbaik adalah selalu menguji elemen fixed di berbagai browser dan perangkat. Nielsen (2020) mengingatkan bahwa pengalaman pengguna bisa berbeda karena variasi implementasi CSS di tiap mesin rendering. Apa yang terlihat sempurna di Chrome mungkin tidak sama di Safari atau Edge. Karena itu, uji lintas-browser menjadi keharusan.

Selain itu, perangkat dengan resolusi berbeda dapat menampilkan elemen fixed secara tidak konsisten. Robbins (2018) menjelaskan bahwa uji multi-perangkat membantu memastikan bahwa tampilan tetap konsisten di smartphone, tablet, hingga layar besar. Hal ini penting agar pengguna merasa yakin dengan kualitas website yang mereka kunjungi.

Pengujian ini juga memberikan kesempatan untuk menemukan bug atau gangguan sebelum website dirilis. Tullis dan Albert (2013) menekankan bahwa evaluasi usability lebih efektif jika dilakukan di tahap awal pengembangan. Dengan begitu, pengembang bisa segera memperbaiki masalah dan menghindari keluhan pengguna.

8. Kesimpulan

Position: fixed pada CSS adalah salah satu teknik paling berguna untuk menciptakan pengalaman navigasi yang konsisten dan fungsional. Properti ini memungkinkan elemen tetap berada di tempat yang sama meskipun halaman digulir, sehingga sangat cocok untuk header, footer, atau tombol aksi cepat. Robbins (2018) menjelaskan bahwa keterlihatan elemen penting secara konstan akan meningkatkan orientasi pengguna dalam halaman web. Namun, penggunaan yang tidak tepat justru dapat mengurangi kenyamanan, misalnya dengan menutupi konten utama atau memenuhi layar dengan elemen yang tidak relevan. Oleh karena itu, keseimbangan antara fungsi dan estetika perlu diperhatikan dengan cermat.

Di sisi lain, pengembang juga harus memperhatikan aspek teknis seperti responsivitas dan kompatibilitas lintas perangkat. Wroblewski (2011) menekankan bahwa pendekatan mobile-first sangat penting agar elemen fixed tetap proporsional pada layar kecil. Selain itu, pengujian lintas browser membantu memastikan konsistensi pengalaman pengguna di berbagai platform (Tullis & Albert, 2013). Dengan memahami kesalahan umum dan menerapkan praktik terbaik, position: fixed dapat menjadi alat yang sangat efektif untuk memperbaiki tata letak dan meningkatkan usability situs web.

Gagasan utama:

• Position: fixed menjaga elemen tetap terlihat saat halaman digulir.
• Penggunaan yang salah dapat menutupi konten dan mengganggu pengguna.
• Responsivitas dan kompatibilitas lintas perangkat sangat penting.
• Praktik terbaik mencakup uji konsistensi, pembatasan pada elemen penting, dan penyesuaian ukuran.

9. Referensi

• Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (2nd ed.). Beverly, MA: Rockport Publishers.
• Marcotte, E. (2011). Responsive web design. New York, NY: A Book Apart.
• Nielsen, J. (2020). Usability engineering. Cambridge, MA: Morgan Kaufmann.
• Robbins, J. N. (2018). Learning web design: A beginner’s guide to HTML, CSS, JavaScript, and web graphics (5th ed.). Sebastopol, CA: O’Reilly Media.
• Tullis, T., & Albert, B. (2013). Measuring the user experience: Collecting, analyzing, and presenting usability metrics (2nd ed.). Waltham, MA: Morgan Kaufmann.
• Wroblewski, L. (2011). Mobile first. New York, NY: A Book Apart.