Menjadi melekat dengannya — Menyelesaikan masalah kedudukan melekit CSS-tutorial css-php.cn

Ditulis oleh Ibadehin Mojeed✏️

Anda bekerja selama beberapa hari, mungkin berbulan-bulan, untuk membina halaman web yang anggun. Semuanya kelihatan hebat pada mulanya, tetapi kemudian anda mula menatal... dan tiba-tiba, elemen melekit anda — menu navigasi, pengepala atau bar sisi menyeru kepada tindakan — sama ada tidak melekat langsung atau tidak kekal di tempat yang sepatutnya.

Mengecewakan, bukan?

Perkara yang mungkin kelihatan seperti pepijat kecil pada mulanya boleh menjadi sakit kepala dengan cepat dan jika dibiarkan tidak diselesaikan, boleh menjejaskan penglibatan tapak anda dengan ketara.

Dalam panduan ini, kami akan menangani masalah kedudukan melekit yang paling biasa ini:

Tiada offset dinyatakan
Elemen melekit di dalam bekas flex/grid
Ketinggian bekas unsur melekit
Moyang mempunyai harta limpahan
limpahan pada elemen badan

Kemudian kami akan membincangkan cara menyelesaikan masalah kedudukan melekit ini dengan contoh dan petua praktikal untuk menjadikan anda profesional kedudukan melekit! Anda juga boleh mendapatkan gambaran keseluruhan sifat kedudukan dan kedudukan melekat CSS selepas kami melalui isu biasa.

Tiada offset dinyatakan

Langkah penyelesaian masalah yang pertama dan paling mudah ialah memastikan bahawa offset ditentukan menggunakan sifat seperti atas, kanan, bawah atau kiri:

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

Salin selepas log masuk

Tanpa offset, gelagat melekit tidak akan diaktifkan. Selain itu, pastikan bahawa offset yang digunakan adalah sesuai untuk arah tatal yang dimaksudkan. Contohnya, atas atau bawah untuk menatal menegak dan kiri atau kanan untuk menatal mendatar.

Elemen melekit di dalam bekas flex/grid

KodPen di bawah menunjukkan unsur melekit di dalam bekas grid:

Lihat elemen Pen Sticky di dalam bekas grid oleh Ibaslogic (@ibaslogic) pada CodePen.

Dalam CodePen, tajuk melekat kerana bekas yang memuatkan setiap satu daripadanya mempunyai ruang boleh tatal yang mencukupi. Untuk menggambarkan reka letak dengan lebih baik, cuba tambahkan sempadan di sekeliling kandungan. Ini akan membantu anda melihat cara setiap tajuk kekal pada tempatnya semasa anda menatal bahagian.

Getting sticky with it — Troubleshooting CSS sticky positioning

Dalam kod HTML, tajuk diletakkan dalam bekas grid dan item grid secara semula jadi meregang untuk memenuhi ruang yang tersedia. Walau bagaimanapun, regangan ini boleh menghalang elemen melekit daripada mempunyai ruang yang cukup untuk menatal dan melekat.

Untuk menyelesaikan masalah ini, kami menggunakan item penjajaran: mulakan ke bekas grid. Ini menghalang elemen melekit daripada diregangkan, memastikan ia mempunyai ruang yang cukup untuk berfungsi seperti yang dimaksudkan:

.sticky-heading {
  position: sticky;
  top: 0; /* Offset not defined - sticky behavior won't activate */
}

Salin selepas log masuk

Tanpa item penjajaran: mulakan, bekas grid akan meregangkan tajuk untuk mengisi ruang yang tersedia, menghalang elemen daripada melekat pada bahagian atas port pandangan. Ini berlaku kerana ruang boleh tatal tidak mencukupi untuk elemen dilampirkan dengan betul seperti yang ditunjukkan di bawah:

Getting sticky with it — Troubleshooting CSS sticky positioning

Walaupun contoh menunjukkan pelaksanaan untuk grid, penyelesaian yang sama digunakan untuk reka letak flexbox juga.

Ketinggian bekas unsur melekit

Sambil anda berinteraksi dengan CodePen di bawah dan tatal port pandangan untuk melihat gelagat melekit, anda akan dapati bahawa elemen melekit pertama tidak berfungsi seperti yang diharapkan, manakala elemen kedua berfungsi dengan betul — walaupun reka letak kelihatan serupa secara visual :

Seperti yang dinyatakan sebelum ini, untuk elemen melekit berfungsi dengan baik, bekasnya mestilah mempunyai ketinggian yang mencukupi atau ruang yang boleh ditatal. Mari kita lihat lebih dekat pada bekas. Dalam reka letak pertama, elemen melekit disertakan dalam

:
tambahan

article {
  align-items: start;
  /* ... */
}

Salin selepas log masuk

Dalam CodePen di bawah, anda boleh menatal bahagian untuk melihat bagaimana tajuk melekit kini melekat dalam bahagian itu sendiri. Sempadan telah ditambahkan untuk menggambarkan kawasan boleh ditatal:

limpahan pada elemen badan

Menetapkan limpahan pada elemen badan biasanya tidak memecahkan kedudukan melekit seperti yang mungkin berlaku dengan unsur nenek moyang yang lain:

<badan>



<p>Ini kerana badan mencipta konteks tatal utama untuk keseluruhan halaman dan elemen melekit masih melekat berbanding dengan port pandangan dalam kes ini:</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>Walaupun mekanisme penatalan dibuat, ia tidak mengganggu gelagat melekit seperti dalam bekas yang lebih kecil — kecuali apabila menetapkan limpahan: tersembunyi, yang mengalih keluar keupayaan untuk menatal sebarang kandungan yang melimpahi port pandangan. </p>

<p>Sekarang kami telah membincangkan isu melekat biasa, anda boleh membaca gambaran keseluruhan yang lebih umum tentang sifat kedudukan dan kedudukan melekit.</p><h2>
  
  
  Gambaran keseluruhan ringkas tentang harta kedudukan
</h2>

<p>Harta kedudukan CSS mengawal cara elemen diletakkan pada halaman web. Dengan nilai seperti relatif, mutlak, tetap atau melekit, anda boleh melaraskan peletakan elemen menggunakan sifat atas, kanan, bawah dan kiri dalam blok yang mengandungi atau port pandangan. Nilai ini juga membolehkan elemen diletakkan dalam hubungan antara satu sama lain menggunakan indeks-z. </p>

<p>Walau bagaimanapun, perlu diingat bahawa sifat mengimbangi ini (iaitu, atas, kanan, bawah, kiri) dan indeks z tidak digunakan pada elemen dengan kedudukan statik lalai. </p>

<p>Apabila ia datang untuk menyelesaikan masalah kedudukan melekit, adalah berguna untuk menyemak semula nilai melekat. Memahami tingkah lakunya akan memberikan gambaran yang lebih jelas tentang isu biasa dan cara menanganinya dengan berkesan.</p>

<h2>
  
  
  Kedudukan melekat CSS
</h2>

<p>Apabila anda menggunakan kedudukan: melekat pada elemen, ia berkelakuan serupa dengan elemen yang agak kedudukannya dengan mengekalkan tempatnya dalam aliran dokumen. Walau bagaimanapun, ia juga mendapat keupayaan untuk menjadi "melekit" dan bertindak balas kepada menatal. </p>

<p>Jika anda mentakrifkan ofset, seperti atas: 10px, elemen akan melekat pada kedudukan itu semasa anda menatal ke bawah, berkelakuan seperti menggunakan position: fixed. Untuk menatal mendatar, anda boleh menggunakan offset seperti kiri atau kanan untuk mencapai kesan yang serupa. Adalah penting untuk ambil perhatian bahawa tingkah laku melekit hanya digunakan dalam blok yang mengandungi elemen. Sebaik sahaja anda menatal melepasi sempadan blok itu, elemen melekit akan menatal keluar seperti mana-mana elemen biasa. </p>

<p>KodPen di bawah menunjukkan tingkah laku melekit. Tatal port pandangan untuk melihat tajuk melekit dalam tindakan:</p>

<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<p>Setiap tajuk HTML digayakan dengan kedudukan: melekit dan atas: 0, memastikan ia melekat pada bahagian atas port pandangan semasa anda menatal kandungan. Walau bagaimanapun, tajuk melekat tetap terhad kepada bahagian masing-masing. Setelah kandungan bahagian ditatal sepenuhnya melepasi, tajuknya bergerak ke atas, membenarkan tajuk seterusnya melekat pada tempatnya. Ini menunjukkan bahawa unsur melekit tidak terlepas dari bekas induknya.</p>

<h2>
  
  
  Kesimpulan
</h2>

<p>Membina halaman web boleh mengecewakan apabila elemen melekit tidak berfungsi seperti yang diharapkan. Walau bagaimanapun, memahami faktor utama seperti sifat limpahan nenek moyang dan ketinggian bekas induk boleh membantu anda menyelesaikan masalah kedudukan melekit. </p>

<p>Dengan contoh dan petua dalam panduan ini, anda akan dapat memastikan navigasi melekit, pengepala dan seruan tindakan bar sisi berfungsi dengan lancar. Jika anda mendapati panduan ini membantu, sila kongsikan dalam talian. Dan jika anda mempunyai sebarang soalan atau sumbangan, sertai saya di bahagian komen!</p><hr>

<h2>
  
  
  Adakah bahagian hadapan anda memonopoli CPU pengguna anda?
</h2>

<p>Memandangkan bahagian hadapan web semakin kompleks, ciri rakus sumber menuntut lebih banyak lagi daripada penyemak imbas. Jika anda berminat untuk memantau dan menjejaki penggunaan CPU pihak pelanggan, penggunaan memori dan banyak lagi untuk semua pengguna anda dalam pengeluaran, cuba LogRocket.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>

<p>LogRocket adalah seperti DVR untuk apl web dan mudah alih, merakam semua yang berlaku dalam apl web, apl mudah alih atau tapak web anda. Daripada meneka sebab masalah berlaku, anda boleh mengagregat dan melaporkan metrik prestasi bahagian hadapan utama, memainkan semula sesi pengguna bersama-sama dengan keadaan aplikasi, log permintaan rangkaian dan secara automatik memaparkan semua ralat.</p>

<p>Modenkan cara anda menyahpepijat web dan apl mudah alih — mula memantau secara percuma.</p>

Salin selepas log masuk

Atas ialah kandungan terperinci Menjadi melekat dengannya — Menyelesaikan masalah kedudukan melekit CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!