Mengapa Sempadan Saya Tidak Dipaparkan pada Elemen Berkedudukan Melekit?

Gaya Sempadan Tidak Dipaparkan pada Elemen dengan Kedudukan Melekit

Dalam CSS, kedudukan "melekit" membenarkan elemen kekal pada skrin walaupun apabila kandungan di sekeliling menatal. Walau bagaimanapun, apabila digunakan pada elemen dengan sempadan, sempadan mungkin tidak kelihatan seperti yang dijangkakan.

Punca:

Isu ini timbul kerana penggunaan "sempadan- runtuh" ​​harta. Apabila ditetapkan kepada "runtuh", sempadan antara unsur bersebelahan digabungkan dan diedarkan di antara unsur tersebut. Dalam kes elemen dengan kedudukan melekit, sempadan atas pada elemen melekit mungkin bergabung dengan sempadan elemen yang mengandungi (cth., jadual), manakala sempadan bawah mungkin bergabung dengan sempadan elemen seterusnya.

Penyelesaian:

Untuk menyelesaikan masalah ini, anda boleh menukar sifat "runtuh sempadan" daripada "runtuh" ​​kepada "berasingan." Ini akan menghalang sempadan daripada digabungkan dan memastikan setiap elemen mempunyai sempadan tersendiri.

Sebagai alternatif, anda boleh mentakrifkan sempadan secara eksplisit pada setiap elemen individu menggunakan peraturan CSS seperti:

table thead th {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

Ini memastikan bahawa sempadan pada pengepala jadual melekit digunakan terus pada sel tanpa terjejas oleh keruntuhan sempadan harta.

Contoh:

Laksanakan gaya CSS berikut untuk mencapai tingkah laku yang diingini:

table {
  border-collapse: separate;
}

table thead th {
  position: sticky;
  top: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

Atas ialah kandungan terperinci Mengapa Sempadan Saya Tidak Dipaparkan pada Elemen Berkedudukan Melekit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!