position: sticky 在表格中需作用于 th/td 且父容器须满足三条件：有高度约束、纵向滚动、无阻断属性；否则退化为 static，常见干扰包括 overflow:hidden、transform 等创建新层叠上下文。
position: sticky 在表格中不是“写了就吸顶”，而是高度依赖滚动上下文和层叠环境。直接给 thead 或 tr 设 position: sticky 基本无效，必须作用于 th 或 td，且父容器必须满足三个硬性条件：有高度约束、有纵向滚动、无阻断属性。
为什么 thead th 加了 position: sticky 还是不吸顶
浏览器根本没把它当粘性元素处理——table 默认不提供滚动上下文，thead 的父级（即 table）又没设 height 和 overflow-y，sticky 就退化为 static。常见干扰源包括：
-
table或其任意祖先设置了overflow: hidden、transform、filter或will-change—— 这些会创建新层叠上下文，切断 sticky 锚定链 -
th的top值为空或auto，必须显式写成top: 0 - 外层容器（如
div.table-wrapper）只写了overflow: auto，但没配max-height或height，导致无滚动触发条件 - 在 CodePen/JSFiddle 等编辑器中，预览区用
display: flex包裹table且未设高度，sticky 直接静默
th 上写 position: sticky 的最小必要 CSS
以下代码是真正能跑通的最小集合，删掉任意一条都可能失效：
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
thead th {
position: sticky;
top: 0;
background: white;
z-index: 1070;
}
-
z-index: 1070不可省略，否则会被 Bootstrap 的.dropdown-menu（z-index: 1050）或.modal（z-index: 1060）盖住 -
background必须不透明，滚动时不然 tbody 内容会透上来 - 不要给
table、thead或tr设position: sticky，只作用于th或td - 多行表头时，第二行
th的top要手动计算，比如top: 42px（首行高 + padding + border）
移动端和旧版 Safari 的兼容性陷阱
iOS Safari 15.2–15.3 存在严重 bug：吸顶错位、卡顿、甚至滚动后无法恢复。仅靠 @supports (position: sticky) 检测不到该问题。真实项目中必须降级：
- 用
IntersectionObserver监听表头进入视口，动态加.is-stuck类 - 降级时别直接切
position: fixed，必须同步给tbody加margin-top补偿高度，否则内容上蹿 - IE 完全不支持，需 JS 兜底；但避免高频触发
scroll事件，改用requestAnimationFrame批量判断 - 移动端 touch 滚动下 sticky 可能有 1–2 帧延迟，可对
th加will-change: transform缓解（慎用，别滥用）
在线编辑器里想稳定运行？放弃原生 table
在 CodePen、StackBlitz 或 VS Code Live Server 中，position: sticky 对原生表格几乎必然失效。可靠路径是用 div 模拟表格结构：
- 把表头抽离为独立容器 ，设
position: sticky; top: 0; z-index: 10; background: white- 滚动区域必须是它的**同级兄弟元素**，不能嵌套在同一个父容器内
- 列宽必须硬编码（如
style="width: 150px"）或用 JS 同步，table-layout: fixed在div布局中无效- 确保
.thead-sticky的**直接父容器**同时满足：max-height: 400px+overflow-y: auto，且无transform、filter等属性最易被忽略的是“直接父容器”这个限定——哪怕外层套了十层
div，只要紧挨着 sticky 元素那层没设max-height和overflow-y，它就永远不吸顶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
