Mengapa Navigasi Melekit Saya Tidak Berfungsi Di Dalam Elemen Bersarang?

Mengapa position:sticky Tidak Berfungsi dalam Elemen Bersarang

Apabila menggunakan navigasi melekit, anda mungkin menghadapi cabaran apabila tingkah laku melekit gagal berfungsi sebaik sahaja elemen navigasi disertakan dalam elemen lain. Ini disebabkan oleh cara kedudukan:melekit berfungsi.

Memahami kedudukan:melekit

kedudukan:melekit meletakkan elemen berbanding aliran normalnya. Walau bagaimanapun, position:sticky menghasilkan reka letak elemen yang mengandungi. Dalam senario anda, elemen induk ditakrifkan dengan ketinggian tetap, ditentukan oleh ketinggian elemen position:sticky. Akibatnya, elemen melekit tidak mempunyai ruang untuk berkelakuan melekit.

Memvisualisasikan Isu

Untuk menggambarkan masalah, tambahkan sempadan pada elemen induk:

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

Anda akan perasan bahawa elemen melekit terkandung dalam elemen induk tetap ketinggian.

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