為什麼我的邊框沒有顯示在黏性定位的元素上？

邊框樣式不顯示在具有黏性位置的元素上

在CSS 中，「黏性」位置允許元素在螢幕上保持固定即使周圍的內容滾動。但是，當套用於有邊框的元素時，邊框可能不會如預期顯示。

原因：

此問題是由於使用「border-崩潰」屬性。當設定為「折疊」時，相鄰元素之間的邊界將組合併分佈在這些元素之間。對於具有黏性位置的元素，黏性元素的頂部邊框可能會與包含元素（例如表格）的邊框合併，而底部邊框可能會與後續元素的邊框合併。

解決方案：

要解決此問題，可以將“border-collapse”屬性從“collapse”更改為“分離。”這將防止邊框合併並並確保每個元素都有自己獨特的邊框。

或者，您可以使用CSS 規則明確定義每個單獨元素的邊框，例如：

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

這可確保粘性表格標題上的邊框直接應用於單元格，而不受邊框折疊的影響屬性。

範例：

實現以下 CSS 樣式以實現所需的行為：

table {
  border-collapse: separate;
}

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

以上是為什麼我的邊框沒有顯示在黏性定位的元素上？的詳細內容。更多資訊請關注PHP中文網其他相關文章！