Mengapa Navigasi Melekit Saya Hilang Apabila Bersarang Dalam Elemen Lain?

Masalah: Kedudukan Melekit Hilang Apabila Elemen Bersarang

Dalam CSS anda, anda telah menentukan navigasi melekit dalam elemen lain, tetapi ia gagal mengekalkan tingkah laku melekitnya apabila bersarang. Mengapa ini berlaku?

Penjelasan:

Kedudukan: sticky mengira kedudukannya berbanding dengan unsur induknya. Apabila anda menyarangkan navigasi dalam elemen lain (cth., .nav-wrapper), elemen induk menentukan gelagat melekit.

Malangnya, dalam contoh anda, .nav-wrapper mempunyai ketinggian ditentukan oleh sticky . elemen navigasi. Akibatnya, tiada ruang tersedia dalam induk untuk elemen .nav melekat.

Penyelesaian:

Untuk menyelesaikan isu ini, anda boleh menambah sempadan kepada elemen induk untuk menggambarkan masalah. Semasa anda menatal, anda akan melihat bahawa ketinggian ibu bapa sepadan dengan ketinggian navigasi, tidak meninggalkan ruang untuk tingkah laku melekit.

Contoh dengan Sempadan:

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

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

body {
  min-height:200vh;
}

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