position: sticky 表头吸顶需同时满足可滚动祖先、无阻断层叠上下文、显式 top 值及足够 z-index；常见失效主因是 table 父容器未设 max-height/overflow 或存在 overflow: hidden/transform 等阻断属性。
position: sticky 能实现表头吸顶，但不是写上就生效——它依赖滚动上下文、层叠控制和阈值设置三者同时成立。常见“写了没反应”，八成是父容器拦住了。
为什么 thead th 加了 position: sticky 却不吸顶
根本原因：浏览器要求 sticky 元素必须有一个**可滚动的最近祖先容器**，而 <table> 默认没有滚动能力，<code><thead> 又被包裹在其中，导致 sticky 退化为 <code>static。
<table> 缺少 <code>height或max-height+overflow-y: auto- 其直接父容器（比如
<div class="table-wrapper">）设置了 <code>overflow: hidden、transform、filter或will-change—— 这些会创建新层叠上下文，直接阻断 sticky -
top值未显式设置（top: auto或留空无效） -
z-index没设，或被后续<tr> 内容覆盖，造成视觉穿透 <h3>最小可行 CSS 组合（不含冗余）</h3> <p>以下代码是真正能跑通的底线配置，缺一不可：</p> <pre class="brush:php;toolbar:false;">.table-wrapper { max-height: 400px; overflow-y: auto; } thead th { position: sticky; top: 0; background: white; z-index: 10; } </pre> <ul><li> <code>.table-wrapper必须是<table> 的直接父容器，且不能有 <code>overflow: hidden -
top: 0必须带单位（top: 0px更稳妥），不能是top: auto -
background推荐显式设置，否则滚动时下方单元格文字会透上来 -
z-index必须大于表格内容行的默认层叠顺序（<tbody> 中的 <code><tr> 通常无 <code>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> 或 <code><thead> 上直接加 <code>transform: translateZ(0)——这会禁用 stickyiOS 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。
- 首行表头吸顶后，第二行需设
