Mengapa Elemen Melekit Saya Tidak Berfungsi Di Dalam Bekas Induknya?

Elemen Melekit Tidak Berfungsi Dalam Diri Ibu Bapa

Anda mungkin menghadapi senario di mana kedudukan: melekit tidak berkelakuan seperti yang diharapkan apabila bersarang dalam elemen lain.

Isu timbul kerana position: sticky mempertimbangkan saiz elemen induk. Jika ketinggian unsur induk ditentukan oleh anak melekitnya, tiada ruang untuk kanak-kanak itu melekat.

Contoh:

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

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

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

Menambahkan sempadan untuk menggambarkan isu:

.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>

Penyelesaian:

Untuk menyelesaikannya, pastikan elemen induk mempunyai saiznya yang ditentukan secara bebas, meninggalkan ruang untuk anak melekit. Ini boleh dicapai menggunakan sifat CSS seperti ketinggian atau ketinggian min.

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