position: sticky 在表格中生效需同时满足四个前提：外层容器设 overflow-x: auto 且有宽高约束；table-layout: fixed；sticky 元素显式设 background-color；z-index 非 auto 且左上角单元格 z-index 最高。
原生 根本不是浏览器 bug，而是 sticky 的定位逻辑依赖滚动上下文和层叠规则。表格单元格（ 这是最常用、也最易踩坑的组合。关键在于两组样式必须共存且互不干扰： iOS Safari 15.4+、Chrome 56+、Firefox 59+ 均支持 即使样式全对，也可能因结构细节失败： 真正难的不是写几行 CSS，而是让 <table> 上直接对 <code><th> 或 <code><td> 设置 <code>position: sticky; left: 0 和 top: 0，在绝大多数现代浏览器中确实能工作——但必须满足 4 个硬性前提，缺一不可。否则你会看到“首列不粘”“首行跳动”“左上角被遮盖”等现象。
为什么
position: sticky 在表格里有时不生效<th>/<code><td>）本身不创建新的层叠上下文，且部分浏览器（如旧版 Safari）对 <code>left/right 在 table-cell 上的支持极弱。真正起效的条件是：
overflow-x: auto 或 overflow: auto，且有明确宽度/高度约束（不能靠内容撑开）<table> 必须设 <code>table-layout: fixed，否则列宽浮动会导致 sticky 锚点漂移
thead th、tbody td:first-child 等）必须显式设置 background-color，否则内容会透出z-index 不能是 auto 或 initial，左上角交汇单元格需最高值（如 z-index: 3）
thead th 固定首行 + tbody td:first-child 固定首列
thead th 加 position: sticky; top: 0; z-index: 2; background: white;
tbody td:first-child, tbody th:first-child 加 position: sticky; left: 0; z-index: 1; background: white;
thead th:first-child）要同时写 top: 0; left: 0; z-index: 3;，否则会被右侧或下方 sticky 元素覆盖<table> 或其祖先设 <code>transform、filter、will-change，这些会切断 sticky 的滚动上下文链
移动端和旧浏览器兼容性怎么兜底
position: sticky 的双向固定，但 iOS 14 及更早版本、Android WebView 旧内核仍可能失效。此时不能靠 polyfill，而应降级为 JS 模拟：
scroll 事件（注意加 { passive: false } 防 iOS 被禁用）getBoundingClientRect() 获取第一列实际位置，再通过 transform: translateX(${x}px) 动态偏移position: absolute，父 <table> 设 <code>position: relative
容易被忽略的细节：宽度、白空间与语义
width: 120px 或 min-width），table-layout: fixed 下若无设定，列宽由首行内容撑开，sticky 区域会塌缩white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
<input>、<button></button>），需确保 tabindex 和 aria-label 正确，否则无障碍体验断裂display: flex 或 grid，复杂布局会干扰 sticky 的定位计算sticky 在各种尺寸、各种内容、各种浏览器下都稳定触发——它像一个精密的机械开关，少拧紧一颗螺丝，整个联动就失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
