Tajuk baharu: Perkara saya ialah: sifat melekit unsur melekit tidak dikekalkan apabila menggunakan flexbox

Question

Saya terperangkap dalam isu ini untuk seketika dan ingin berkongsi kedudukan: sticky + flexbox issue:

Div melekit saya, selepas bertukar kepada paparan bekas flexbox, tiba-tiba tidak lagi melekit apabila dibalut dengan elemen induk flexbox.

.flexbox-wrapper {
  paparan: flex;
  ketinggian: 600px;
}
.biasa {
  warna latar belakang: biru;
}
.melekit {
  kedudukan: -webkit-sticky;
  kedudukan: melekit;
  atas: 0;
  warna latar belakang: merah;
}

<div class="flexbox-wrapper">
  <div class="biasa">
    Ini kotak biasa
  </div>
  <div class="sticky">
    Ini adalah kotak melekit
  </div>
</div>

Masalah paparan JSFiddle

Answer 1

Dalam kes saya, bekas induk menggunakan fungsi overflow-x: hidden;这个样式，这会破坏position: sticky. Anda perlu mengalih keluar peraturan ini.

Tiada elemen induk harus mempunyai peraturan CSS di atas digunakan padanya. Syarat ini terpakai kepada semua elemen induk sehingga (tetapi tidak termasuk) elemen 'badan'.

Answer 2

Memandangkan elemen flexbox lalai kepada stretch, semua elemen mempunyai ketinggian yang sama dan tidak boleh ditatal.

Tambahkan align-self: flex-start pada elemen melekit, tetapkan ketinggian kepada automatik, sekali gus membolehkan penatalan dan pembetulan.

Pada masa ini ini disokong dalam semua penyemak imbas utama, tetapi Safari masih menghadapi beberapa masalah dengan menggunakan jadual -webkit-前缀，而除了Firefox之外的其他浏览器在使用position: sticky.

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* 不是必需的 -- 仅作为示例 */
}
.regular {
  background-color: blue; /* 不是必需的 -- 仅作为示例 */
  height: 600px;          /* 不是必需的 -- 仅作为示例 */
}
.sticky {
  position: -webkit-sticky; /* 适用于Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- 这是修复的地方 */
  background-color: red;  /* 不是必需的 -- 仅作为示例 */
}

<div class="flexbox-wrapper">
  <div class="regular">
    这是普通的盒子
  </div>
  <div class="sticky">
    这是粘性的盒子
  </div>
</div>