滚动时tbody上移覆盖标题与thead的CSS布局问题修复求助

你的问题核心是粘性元素层级低于tbody内容，加上缺少背景遮挡，导致滚动时tbody内容“钻”到标题和表头下方。直接按下面的步骤修改CSS就能解决：

修复步骤 #

1. 给粘性元素设置z-index和背景色
   h1和thead需要更高的层级，同时背景色要覆盖下方内容，避免透显：

   h1 {
     text-align: center;
     position: sticky;
     top: 0;
     left: 0;
     z-index: 10; /* 确保层级高于tbody */
     background: #fff; /* 和容器背景一致，遮挡下方滚动内容 */
     margin: 0; /* 去掉默认margin，避免顶部留白 */
     padding: 10px 0; /* 可选，优化标题排版 */
   }
   
   .table_container .table thead {
     position: sticky;
     top: 40px; /* 和h1高度匹配，紧接在标题下方 */
     left: 0;
     z-index: 9; /* 低于h1但高于tbody */
     background: #fff; /* 同样加背景色遮挡 */
   }
   

2. 优化表格和容器样式
   确保表格占满容器宽度，tbody滚动范围正确：

   .table_container {
     display: block;
     position: absolute;
     z-index: 100;
     height: 490px;
     width: 50%;
     top: 40%;
     left: 10%;
     overflow: auto;
     background: #fff; /* 给容器加背景，避免滚动边缘透显 */
     border: 1px solid #eee; /* 可选，区分弹窗边界 */
   }
   
   .table_container .table {
     width: 100%; /* 表格占满容器宽度 */
     border-collapse: collapse; /* 合并边框，优化表头与单元格对齐 */
   }
   
   .table_container .table th,
   .table_container .table td {
     padding: 8px 12px; /* 增加单元格内边距，提升可读性 */
     border-bottom: 1px solid #eee;
   }
   

效果说明 #

修改后滚动容器时：

• h1固定在容器顶部，不会被tbody覆盖
• thead固定在h1下方，保持与标题的间距
• tbody内容滚动时会被标题和表头的背景色遮挡，不会透显

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