CSS Academy · Pelajaran

Pemosisian Tetap dan Melekat

Tetapkan elemen pada area pandang atau buat header dan bilah sisi yang melekat saat digulir.

Pemosisian Tetap dan Melekat adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

position: fixed

Elemen tetap diposisikan relatif terhadap area pandang peramban dan tetap berada di tempatnya bahkan saat halaman digulir. Elemen ini juga dikeluarkan dari alur dokumen.

<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>

Kasus Penggunaan Pemosisian Tetap

Penggunaan umum position: fixed:

Bilah navigasi yang tetap berada di bagian atas
Tombol aksi mengambang (FAB)
Widget obrolan di kanan bawah
Spanduk persetujuan kuki
Lapisan modal

Mengimbangi Tajuk Tetap

Tajuk tetap menutupi konten di bawahnya. Tambahkan padding atau margin atas yang sama dengan tinggi tajuk untuk mendorong konten ke bawah:

<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>

Induk yang Ditransformasi dan Fixed

Keunikan penting: jika elemen induk memiliki CSS transform, perspective, atau filter yang diterapkan, pemosisian tetap menjadi relatif terhadap elemen induk tersebut, bukan area pandang. Ini adalah bug yang umum.

position: sticky

position: sticky bersifat hibrida: elemen bergulir secara normal hingga mencapai ambang batas yang ditentukan (misalnya top: 0), lalu elemen tersebut melekat di dalam kontainer induknya.

<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>

Sticky Memerlukan Induk yang Dapat Digulir

Elemen sticky melekat di dalam blok penampungnya. Jika elemen induk tidak cukup tinggi untuk digulir, sticky tidak berpengaruh. Elemen induk harus memiliki overflow yang tidak diatur ke hidden.

Atas Kanan Bawah Kiri untuk sticky

Anda harus menentukan setidaknya satu pergeseran agar sticky aktif. Pola yang umum:

<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>

Tajuk Tabel Lekat

Sticky sangat cocok untuk tajuk tabel dalam pembungkus tabel yang dapat digulir—tajuk tetap terlihat saat pengguna menggulir baris.

<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>

Pola Bilah Samping Lekat

Bilah samping lekat klasik yang tetap terlihat saat konten utama digulir:

<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>

Ringkasan Tetap vs Lekat

Perbedaan utama:

Tetap: selalu relatif terhadap area pandang, selalu berada di luar alur
Lekat: bergulir bersama konten hingga ambang batas, tetap berada dalam alur, berhenti di batas elemen induk

Kinerja: Elemen Tetap dan Lapisan

Elemen tetap membuat konteks penumpukan baru dan dapat memicu tata letak saat pengguliran jika bertumpang tindih dengan area pengecatan ulang. Buat elemen tetap tetap sederhana dan hindari properti yang mahal seperti box-shadow pada elemen tersebut.

Pemeriksaan Singkat

Batasan apa yang dimiliki position: sticky tetapi tidak dimiliki position: fixed?

Ringkasan

position: fixed menambatkan elemen ke area pandang untuk navigasi lekat dan lapisan. position: sticky bergulir secara normal hingga mencapai ambang batas lalu melekat—sangat cocok untuk tajuk tabel dan bilah samping. Keduanya memerlukan setidaknya satu properti pergeseran agar perilaku melekat aktif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemosisian Tetap dan Melekat” gratis?

Ya — teks lengkap “Pemosisian Tetap dan Melekat” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemosisian Tetap dan Melekat”?

Tetapkan elemen pada area pandang atau buat header dan bilah sisi yang melekat saat digulir. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Pemosisian Tetap dan Melekat” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy