position: sticky 的水平粘性（如 left）必须显式声明且依赖父容器 overflow-x 设置；仅设 top 不触发 left 行为，父容器需有 overflow-x: auto/scroll 并避免 align-items:center、transform 等干扰，ios 还需 -webkit-sticky 和 will-change 修复。
为什么只设 top 在水平滚动时完全没用
浏览器对 position: sticky 的水平方向（x 轴）粘性逻辑是独立触发的：它根本不会因为你写了 top: 0 就自动启用 left 行为。只要没显式声明 left 或 right，哪怕容器正在疯狂水平滚动，元素在 x 方向始终按普通流布局，计算值就是 static。
常见现象是：表格表头能垂直固定，但首列一滚动就“跑掉”；DevTools 里看该列的 position 计算值仍是 static —— 这不是 bug，是规范行为。
-
left必须是具体值（如left: 0、left: 16px、left: 5vw），不能是auto - 同时需要垂直+水平粘性（如左上角冻结单元格），必须写全：
top: 0; left: 0 - 如果只想要右固定（比如操作列），用
right: 0，别试图靠left: auto或margin-left: auto模拟
父容器没开水平滚动上下文，left 再对也没人理你
写了 left: 0 却没反应？大概率是父容器压根没被浏览器识别为“可水平滚动的容器”。浏览器判定依据不是内容是否溢出，而是是否设置了 overflow-x: auto、scroll 或 hidden（注意：hidden 会创建上下文但截断内容，慎用）。
- 仅靠
white-space: nowrap+width: fit-content不足以激活水平粘性 - 检查父级是否漏了
overflow-x: auto；若用了overflow: hidden，需确认是否真需要隐藏滚动条，否则换成overflow-x: auto - 避免在粘性元素的直接父容器上设
overflow: hidden—— 它会让粘性区域在滚动起始处就被裁剪，“卡死”不动
Flex/Grid 父容器里 left 失效，大概率是 align-items 搞的鬼
当 position: sticky 元素放在 display: flex 或 display: grid 的父容器中，且父容器设置了 align-items: center、justify-content: center（Grid 下是 justify-items: center），会导致粘性元素的基准线偏移，left 的参照点错乱，视觉上就像“没粘住”。
- 修复方式：把父容器的对齐方式改为
align-items: flex-start（Flex）或justify-items: start（Grid） - 别用
display: inline-flex包裹 sticky 元素——inline 容器不产生块格式化上下文（BFC），sticky 找不到包含块 - Grid 布局下，检查
grid-template-columns是否用了minmax(0, 1fr)这类可能压缩列宽的写法，否则left参照的列边界会塌缩
iOS Safari 下 left 粘不住，得补 -webkit-sticky 并触发重绘
iOS Safari（尤其 15.4 之前版本）对 left 方向的 sticky 支持极不稳定：滚动中元素可能突然跳回原始位置，或首次滚动完全无响应。这不是 CSS 写错了，是渲染引擎限制。
- 必须同时声明：
position: -webkit-sticky在前，position: sticky在后；顺序反了 Safari 会忽略整条规则 - 加
will-change: transform或transform: translateZ(0)强制触发硬件加速和重绘，提升 iOS 下的粘性稳定性 - 若父容器本身有
transform或filter，它会创建新层叠上下文，干扰 sticky 行为，需额外加position: relative或translateZ(0)补救
最常被忽略的一点：粘性作用域严格受限于其包含块的高度与宽度。哪怕 left: 0 和 overflow-x: auto 都写对了，如果包含块本身被 height: 100vh 截断，水平滚动超出后粘性也会戛然而止——这时候要改的是 height，不是 left。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
