Apa yang Menentukan Kotak Tatal dalam Kedudukan CSS?

Memahami Kotak Tatal dalam Penentududukan CSS

Konsep "kotak tatal" muncul dalam Modul Reka Letak Kedudukan Kedudukan CSS Tahap 3 (Draf Kerja) , khususnya dalam konteks kedudukan melekit. Takrifan menyatakan bahawa offset kotak yang diletakkan melekit dikira secara relatif kepada nenek moyang terdekat dengan kotak tatal atau tempat pandang jika tiada moyang sedemikian wujud.

Menentukan Kotak Tatal

Walaupun istilah itu digunakan dalam draf, ia tidak mempunyai definisi yang tepat di tempat lain dalam CSS. Walau bagaimanapun, berdasarkan maklumat yang tersedia, kotak menatal difahami sebagai:

• Kotak dengan nilai untuk sifat "limpahan" ditetapkan kepada nilai selain daripada "kelihatan" (lalai).

Pemahaman ini sejajar dengan contoh di mana isu limpahan boleh menjejaskan tingkah laku melekit elemen.

Mengenal pasti Kotak Tatal

Dalam amalan, menghidupkan atau mematikan sama ada kotak ialah kotak tatal boleh dicapai dengan mengubah suai sifat "limpahan". Contohnya:

• Jika kotak mempunyai limpahan:tersembunyi sebagai induknya, sebarang kedudukan:elemen melekit di dalamnya tidak akan menatal, kerana pengimbangannya dikira berdasarkan kotak tersembunyi.
• Sebaliknya, menetapkan limpahan: tatal pada kotak nenek moyang akan membenarkan kedudukannya:keturunan melekit untuk menatal dalam kotak itu kotak.

Contoh

Pertimbangkan contoh berikut:

.wrapper {
  height:200vh;
  border:2px solid;
}
.wrapper > div {
  position:sticky;
  top:0;
  height:20px;
  background:red;
}

<div class="wrapper">
  <div></div>
</div>

Dalam contoh ini, div .wrapper ialah kotak tatal kerana limpahan: tatal. Oleh itu, div melekit akan menatal dalam pembalut.

Atas ialah kandungan terperinci Apa yang Menentukan Kotak Tatal dalam Kedudukan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!