Mengapa Navigasi Melekit Saya Tidak Berfungsi Apabila Bersarang Dalam Elemen Diposisikan?

Menyelesaikan masalah "kedudukan:melekit" dalam Elemen Bersarang

Apabila mentakrifkan kefungsian melekit dengan "kedudukan:melekit", anda mungkin menghadapi situasi di mana tingkah laku menjadi tidak konsisten dalam elemen bersarang. Mari kita selidiki sebab perkara ini berlaku dan cara menyelesaikannya.

Memahami Isu

"position:sticky" meletakkan elemen relatif kepada viewport, mewujudkan "sticky" " kesan apabila menatal. Walau bagaimanapun, apabila elemen bersarang dalam elemen kedudukan lain, sifat "position:sticky" berkelakuan berbeza.

Dalam contoh anda, anda mempunyai "pembungkus nav" dengan "kedudukan:mutlak" dan "nav " elemen di dalamnya dengan "position:sticky." Masalahnya di sini ialah elemen induk ("nav-wrapper") mentakrifkan ketinggian elemen melekit ("nav"), tidak meninggalkan ruang untuk gelagat melekit berlaku dalam elemen induk.

Menyelesaikan Isu

Untuk membetulkannya, pastikan elemen induk tidak mengekang ketinggian unsur melekit. Ini boleh dicapai dengan mengalih keluar ketinggian tetap atau menggunakan pilihan saiz fleksibel seperti "tinggi min" atau "tinggi maks."

Contoh dengan Sempadan untuk Visualisasi

Berikut ialah contoh dengan sempadan ditambahkan pada elemen induk untuk lebih mudah visualisasi:

.nav-wrapper {
  position: absolute;
  bottom: 0;
  border: 2px solid;
}

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

body {
  min-height: 200vh;
}

<div class="nav-wrapper">
  <nav>
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>About</li>
    </a>
  </nav>
</div>

Dengan mengalih keluar ketinggian tetap daripada elemen induk, gelagat melekit kini akan berfungsi seperti yang diharapkan dalam elemen bersarang.

Atas ialah kandungan terperinci Mengapa Navigasi Melekit Saya Tidak Berfungsi Apabila Bersarang Dalam Elemen Diposisikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!