position: sticky 表头固定失效的根本原因是滚动容器缺失或配置错误，需确保父容器设 overflow-y: auto 且有明确高度，th 单独设 sticky top-0 和 z-index，配合 table-fixed 及统一列宽。
position: sticky 能让表头固定，但不是设了 top: 0 就一定生效——它依赖滚动容器、层叠上下文和表格结构三者配合。多数失效场景，根源不在 sticky 本身，而在祖先元素或样式冲突。
为什么 thead th 设了 position: sticky 却不粘？
常见错误现象：表头随内容一起滚动，毫无反应；或只在部分浏览器生效（如 Chrome 可用、Safari 失效）。
根本原因在于 sticky 的定位基准是「最近的滚动祖先」，而非视口。如果表格父容器没有滚动能力，或被 overflow: hidden 截断，sticky 就会退化为 relative。
- 父容器必须有
overflow-y: auto或overflow: auto（不能是hidden或未设置） -
table本身不能是滚动容器——sticky不会在table内部触发，需外层div包裹 -
thead默认不占高度，若内部tr没内容或高度塌陷，top: 0实际无参考位置 - 某些旧版 Safari 需要给
th显式设置background-color才能正确渲染粘性层
th 还是 thead tr？该对谁设 sticky？
推荐直接作用于 th，而不是 thead tr。因为：
-
tr在表格中是匿名 box，部分浏览器对tr应用sticky支持不稳定（尤其 Safari） -
th是可渲染的块级元素，top: 0行为明确，且能单独控制 z-index 和背景 - 多行表头时，可分别给不同
th设置top: 0、top: 40px实现分层固定 - 务必为每个
th设置z-index: 10（不能只设在thead上）
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
table { table-layout: fixed; width: 100%; }
th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
滚动容器怎么选？div 还是 body？
必须用显式的、高度受限的 div 作为滚动容器，不能依赖 body 滚动。
-
body滚动时，sticky会相对于整个页面定位，导致表头“漂”出表格区域 - 正确做法：用一个
div.container包裹table，并设max-height: 500px; overflow-y: auto; - 该容器需有
position: relative（避免子元素z-index失效） - 若容器宽度不够，水平滚动会干扰
sticky垂直行为——建议同时设overflow-x: auto
固定表头后内容透出、错位怎么办？
这是最常被忽略的视觉问题：滚动时下方 td 内容从表头后面穿出来，或列宽不一致导致对不齐。
- 所有
th和对应td必须有相同width（推荐用table-layout: fixed+ 显式列宽） -
th必须设background-color，否则滚动时内容会透出（尤其深色主题下更明显） - 避免在
th里用flex或grid布局——这会破坏表格固有计算逻辑，导致列宽错乱 - IE 完全不支持
sticky，如需兼容，得 fallback 到 JavaScript 同步滚动或重复thead的 hack 方案
真正麻烦的从来不是加那几行 CSS，而是确保表格结构干净、滚动上下文清晰、层叠顺序无歧义——少一个条件，sticky 就只是个摆设。
