Mengapa pengaki 'kedudukan: melekit' saya tidak berfungsi apabila saya mentakrifkan sifat 'ketinggian'?

'kedudukan: melekit' tidak berfungsi apabila 'tinggi' ditakrifkan

Apabila menggunakan CSS untuk mencipta pengepala melekit, adalah perkara biasa untuk tetapkan sifat ketinggian div pengaki. Walau bagaimanapun, ini kadangkala boleh menyebabkan gelagat melekit gagal.

Sebabnya ialah kedudukan melekit bergantung pada blok yang mengandungi untuk menentukan titik melekat. Apabila sifat ketinggian ditakrifkan pada div pengaki, ia menjadi blok yang mengandungi. Akibatnya, div pengaki sudah berada di tepi blok yang mengandunginya dan tiada lagi ambang untuk dilalui untuk mencetuskan gelagat melekit.

Untuk menyelesaikan isu ini, alih keluar sifat ketinggian daripada div pengaki. Ini akan membolehkan badan menjadi blok yang mengandungi dan div pengaki akan dapat melekat pada bahagian bawah halaman seperti yang dimaksudkan.

Berikut ialah contoh bagaimana CSS boleh diubah suai untuk membetulkan lekit tingkah laku:

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92vh;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

Dengan perubahan ini, div pengaki kini akan melekat pada bahagian bawah halaman seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa pengaki 'kedudukan: melekit' saya tidak berfungsi apabila saya mentakrifkan sifat 'ketinggian'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!