为什么我的边框没有显示在粘性定位的元素上？

边框样式不显示在具有粘性位置的元素上

在 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中文网其他相关文章！