Mengapa Elemen Melekit Saya Berhenti Melekat Di Dalam Bekas Flexbox?

Elemen Melekit dan Flexbox: A Gotcha

Konfigurasi CSS tertentu boleh membawa kepada tingkah laku yang tidak dijangka. Satu senario sedemikian berlaku apabila menggabungkan kedudukan: melekit dengan flexbox. Pada mulanya, elemen melekit kekal bertakung sehingga mencapai kedudukan tatal yang ditentukan, namun tingkah laku ini terhenti apabila diletakkan di dalam bekas kotak flex.

Isunya

Masalahnya berpunca daripada tingkah laku flexbox lalai. Secara lalai, semua elemen dalam bekas flexbox terbentang agar sesuai dengan ruang yang tersedia. Akibatnya, sebarang elemen melekit kehilangan kefungsian yang dimaksudkan kerana bekas kotak flex menghalang penatalan.

Penyelesaian

Untuk menyelesaikan isu ini, tambahkan align-self: flex-start harta kepada unsur melekit. Ini menetapkan ketinggian elemen melekit kepada automatik, membenarkan kandungan mengalir secara semula jadi dan mendayakan penatalan.

Keserasian Pelayar

Kebanyakan penyemak imbas utama menyokong penyelesaian ini, walaupun Safari memerlukan penggunaan awalan -webkit-:

.flexbox-wrapper {
  display: flex;
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* fix */
}

Walaupun Firefox tidak menyokong align-self: flex-start property, ia tidak mengalami isu penatalan yang sama dengan position: sticky. Selain itu, position: sticky belum lagi disokong sepenuhnya untuk jadual dalam semua penyemak imbas. Anda dinasihatkan untuk berhati-hati, terutamanya apabila memenuhi keperluan penyemak imbas tertentu.

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