使用 position: sticky 可实现表头吸顶，需设置 thead 中的 tr 或 th 的 top 值，确保父容器无 overflow: hidden，配合 z-index 和背景色保证视觉效果。
要实现表头吸顶效果，可以使用 CSS 的 position: sticky 属性。它能让元素在滚动到特定位置时“粘”在视口的某个地方，非常适合用于表格头部固定。
1. 基本原理：使用 position: sticky
position: sticky 是相对定位和固定定位的结合体。元素在正常文档流中显示，直到滚动到设定的偏移位置后，变为“固定”状态。
为了让表头吸顶，需要设置：
- 给 thead 中的 tr 或 th 添加 position: sticky
- 设置 top 值（例如 top: 0），表示距离视口顶部多少像素时开始吸顶
- 确保父容器没有设置 overflow: hidden，否则会失效
2. HTML 结构示例
一个标准的表格结构：
立即学习“前端免费学习笔记（深入）”；
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
3. 关键 CSS 样式
为表头行添加吸顶样式：
thead th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 10;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
}
说明：
- top: 0 表示滚动到距顶部 0px 时吸附
- background-color 避免下方内容透过文字看到
- z-index 确保表头在其他内容之上
- box-shadow 可增加视觉层次感
4. 注意事项与常见问题
sticky 虽然简单，但有几个关键点容易出错：
- 父元素不能有 overflow: hidden 或 overflow: auto，否则 sticky 会失效
- sticky 只对块级元素生效，确保 table、thead、tr 正常显示
- 多个 sticky 元素会叠加，注意 z-index 控制层级
- 在复杂布局中（如 fixed 容器内），可能需要调整容器的定位上下文
基本上就这些。只要结构清晰、样式正确，position: sticky 就能轻松实现表头吸顶，无需 JavaScript。不复杂但容易忽略细节。
