如何实现滚动时ul列表不超出card-header顶部？

你的问题可以通过纯CSS解决，核心是调整元素层级关系并确保表头背景不透明，修改后的代码如下：

.sticky-header {
  /* 关键：移除父容器可能存在的overflow:hidden，否则会破坏sticky定位 */
  overflow: visible;

  .card-header {
    position: sticky;
    top: 94px;
    z-index: 2;
    background-color: #ffffff; /* 设置为你项目中表头的实际背景色，必须不透明 */
  }

  .list-group {
    position: relative; /* z-index需要配合定位属性才能生效 */
    z-index: 1; /* 让列表层级低于表头，滚动时不会覆盖表头 */
  }
}

关键说明 #

1. 父容器overflow设置：如果.sticky-header或其上级容器有overflow:hidden，会导致sticky定位失效或出现内容覆盖问题，必须确保设置为visible（默认值）。
2. 表头背景不透明：如果表头背景是透明的，即使层级更高，下方的列表内容仍会透出来，所以必须设置明确的背景色。
3. 层级调整：给列表添加position:relative和更低的z-index，确保表头始终在列表上方。

排查补充 #

如果修改后仍有问题，可以通过浏览器开发者工具检查：

• 是否有其他CSS规则覆盖了z-index或position属性
• top:94px的值是否与页面顶部固定导航栏的高度匹配，避免表头被导航栏遮挡

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