Mengapa Kedudukan Melekit Bersarang Gagal, dan Bagaimana Saya Boleh Membetulkannya?

Dilema Kedudukan Melekit: Mengapa Gagal Apabila Bersarang

Apabila meletakkan elemen dengan kedudukan: melekit di dalam elemen lain, ia mungkin berhenti berkelakuan seperti yang dijangka. Ini kerana kedudukan melekit mengambil kira dimensi elemen induknya.

Memahami Isu

Dalam contoh yang disediakan:

.nav-wrapper {
  position: absolute;
  bottom: 0;
}

Elemen induk (nav-wrapper) mentakrifkan ketinggiannya berdasarkan ketinggian nav elemen.

<div class="nav-wrapper">
  <nav>
    <a href="#">...</a>
    <a href="#">...</a>
  </nav>
</div>

Dengan nav yang mempunyai kedudukan: melekit, ia dijangka akan melekat pada bahagian atas tetingkap penyemak imbas. Walau bagaimanapun, memandangkan elemen induk mengambil semua ruang menegak yang tersedia, tiada ruang untuk nav melekat.

Menyelesaikan Isu

Untuk membuat kerja melekit dalam senario ini, anda boleh memberikan elemen nav ketinggiannya sendiri, bebas daripada induknya:

.nav-wrapper {
  position: absolute;
  bottom: 0;
  height: 50px;
}

.nav-wrapper nav {
  position: sticky;
  top: 0;
  height: 100%;
}

Dengan menetapkan ketinggian kedua-dua pembungkus nav dan nav, anda mencipta ruang menegak yang mencukupi untuk kedudukan melekit berfungsi dengan betul.

Atas ialah kandungan terperinci Mengapa Kedudukan Melekit Bersarang Gagal, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!