position: sticky 表头吸顶需同时满足可滚动祖先、无阻断层叠上下文、显式 top 值及足够 z-index；常见失效主因是 table 父容器未设 max-height/overflow 或存在 overflow: hidden/transform 等阻断属性。
position: sticky 能实现表头吸顶，但不是写上就生效——它依赖滚动上下文、层叠控制和阈值设置三者同时成立。常见“写了没反应”，八成是父容器拦住了。
为什么 thead th 加了 position: sticky 却不吸顶
根本原因：浏览器要求 sticky 元素必须有一个**可滚动的最近祖先容器**，而 <table> 默认没有滚动能力，<thead> 又被包裹在其中，导致 sticky 退化为 static。
-
<table>缺少height或max-height+overflow-y: auto - 其直接父容器（比如
<div class="table-wrapper">）设置了overflow: hidden、transform、filter或will-change—— 这些会创建新层叠上下文，直接阻断 sticky -
top值未显式设置（top: auto或留空无效） -
z-index没设，或被后续<tr>内容覆盖，造成视觉穿透
最小可行 CSS 组合（不含冗余）
以下代码是真正能跑通的底线配置，缺一不可：
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
thead th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
-
.table-wrapper必须是<table>的直接父容器，且不能有overflow: hidden -
top: 0必须带单位（top: 0px更稳妥），不能是top: auto -
background推荐显式设置，否则滚动时下方单元格文字会透上来 -
z-index必须大于表格内容行的默认层叠顺序（<tbody>中的<tr>通常无z-index，所以10足够）
多行表头或响应式场景下的 top 设置
单行 top: 0 不够用。当有分组表头、导航栏固定、或小屏折叠时，top 必须动态匹配真实偏移。
立即学习“前端免费学习笔记（深入）”；
- 首行表头吸顶后，第二行需设
top: calc(48px + 1px)（假设首行高 48px，+1px 防 Safari 渲染重叠） - 页面有固定导航栏（高 64px），则
top: 64px，否则表头会被遮住 - 移动端需用媒体查询适配：
@media (max-width: 768px) { thead th { top: env(safe-area-inset-top, 48px); } } - 避免在
<table>或<thead>上直接加transform: translateZ(0)——这会禁用 sticky
iOS Safari 15.2–15.3 的兼容性硬伤
这个版本存在已知 sticky 错位、卡顿、甚至触发后无法恢复的问题，@supports (position: sticky) 完全检测不到。
- 真机测试不可跳过；模拟器无法复现该 bug
- 若必须兼容，可用
IntersectionObserver监听滚动位置，在临界点手动切position: fixed（仅 fallback） - 最稳妥做法：对 iOS Safari 15.2–15.3 UA 字符串做特征识别，降级为 JS 控制的 fixed 方案
真正难的从来不是写那行 position: sticky，而是排查哪一层祖先悄悄截断了粘性链——建议打开 DevTools，从 thead th 往上逐层检查 computed styles，重点盯 overflow、transform 和 will-change。
