Apa yang Menentukan Kotak Tatal dalam CSS?

Apakah yang Mentakrifkan Kotak Tatal dalam CSS?

Dalam CSS, istilah "kotak tatal" mempunyai kepentingan dalam konteks kedudukan melekit. Menurut draf Modul Susun Atur Kedudukan Tahap 3, offset kotak melekit dikira relatif kepada moyang terdekat dengan kotak menatal.

Mengenal pasti kotak menatal boleh menjadi penting untuk mengawal kedudukan melekit. Seperti yang dinyatakan dalam draf, takrifan semasa dan penggunaan istilah berkaitan seperti "akar aliran" tidak sepenuhnya optimum.

Menentukan Status Kotak Tatal

Untuk memahami tingkah laku daripada kotak menatal, mari kita pertimbangkan peranan sifat limpahan. Kotak menatal lazimnya ialah kotak yang limpahan ditetapkan kepada nilai yang tidak kelihatan. Ini bermakna kandungan kotak itu berpotensi melangkaui sempadannya, menjadikannya boleh ditatal.

Sebagai contoh, mari kita pertimbangkan kod berikut:

.wrapper {
  height: 200vh;
  border: 2px solid;
}

.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

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

Dalam senario ini , parent .wrapper lebih tinggi daripada viewport, menyebabkan bar skrol menegak muncul. Akibatnya, div kanak-kanak dengan kedudukan: melekit akan menjadi melekit dalam kawasan yang boleh dilihat .wrapper apabila ditatal. Ini menunjukkan kesan kotak menatal pada kedudukan melekit.

Untuk meringkaskan, kotak penatal dalam CSS biasanya ditakrifkan sebagai kotak dengan limpahan ditetapkan kepada nilai yang membolehkan penatalan. Memahami konsep ini adalah penting untuk memanipulasi dan mengawal gelagat unsur melekit dalam reka bentuk anda.

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