Bootstrap5 list-group滚动列表使用position:sticky粘性表头边框异常

该表现属于Bootstrap默认样式与sticky定位特性结合后的正常渲染结果，不属于浏览器异常：
Bootstrap的list-group-item默认设置了margin-bottom: -1px，目的是让相邻列表项的边框重叠，避免出现双层边框。当两个sticky表头先后吸顶时，二者的相邻边框刚好处于重叠的1px区域，后吸顶的一级表头层级更高，其顶部边框会覆盖前一个吸顶表头的底部边框，最终出现你观察到的边框错位问题。

这里提供两种可直接落地的修改方案：

方案1：调整sticky元素的层级与边距（无需修改原有结构） #

给sticky定位的表头添加自定义样式，抵消默认负边距的影响即可：

/* 一级吸顶表头样式 */
.list-group-item.sticky-top.level-1 {
  z-index: 10;
  margin-top: -1px;
}
/* 二级吸顶表头样式 */
.list-group-item.sticky-top.level-2 {
  z-index: 5;
  top: calc(2.5rem - 1px); /* 调整吸顶位置，消除1px的边框重叠间隙 */
}

方案2：取消list-group的默认边框合并规则 #

如果不需要默认的边框合并效果，可以直接重置列表项的边距规则，从根源避免边框重叠问题：

.list-group-item {
  margin-bottom: 0;
}
.list-group-item:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,.125);
}

两种方案都可以完全解决吸顶时的边框异常问题，可根据实际业务需求选择。

内容的提问来源于stack exchange，提问作者Anvar。