position: sticky在水平滚动时失效，是因为未设置left或right值，且父容器需有overflow-x:auto等滚动上下文；iOS需加-webkit-sticky和will-change优化。
sticky在水平滚动时完全不动，是因为没设left或right
position: sticky 在水平方向（x轴）生效的前提是：必须显式设置 left 或 right 值，且父容器需支持水平滚动。只写 top 或 bottom，哪怕页面正在横向滚动，元素也不会粘住——浏览器压根不启动水平粘性逻辑。
常见错误现象：overflow-x: auto 的容器内，一个带 position: sticky; top: 0 的表格头能垂直固定，但列标题却随滚动“跑掉”；DevTools 中该列标题的 position 计算值仍是 static。
- 必须为需要水平粘住的元素单独加
left: 0（左固定）或right: 0（右固定），不能复用垂直方向的偏移 - 若同时需要垂直+水平粘性（如表格左上角冻结单元格），要同时写
top: 0; left: 0 -
left值可以是具体像素、百分比或vw单位，但不能是auto——left: auto会直接禁用水平粘性
父容器没开水平滚动，sticky的left根本没机会触发
即使写了 left: 0，如果父容器没有形成水平滚动上下文，sticky 依然不会动。浏览器判定“可滚动”的依据不是内容溢出本身，而是是否设置了 overflow-x: auto、scroll 或 hidden（注意：hidden 也会创建滚动上下文，只是不可见）。
- 检查父级是否漏了
overflow-x: auto；仅靠white-space: nowrap+width: fit-content不足以激活 sticky 水平行为 - 避免父容器设
overflow: hidden—— 它虽创建滚动上下文，但会截断粘性区域，导致元素在滚动起始处就“卡死” - 移动端 iOS Safari 对
overflow-x+sticky支持更弱，建议加overflow-x: -webkit-scroll兼容前缀
flex/grid容器中left失效，大概率是align-items干扰
当 sticky 元素放在 display: flex 或 display: grid 的父容器里，且父容器设置了 align-items: center 或 justify-content: center，会导致 sticky 的基准线偏移，left 计算失准，表现就是“看起来没粘住”。
- 给父容器加
align-items: flex-start（flex）或justify-items: start（grid），确保子元素按正常文档流起点对齐 - 不要把 sticky 元素放在
display: inline-flex父级下——inline 容器不产生块格式化上下文（BFC），sticky 无包含块可依 - 若父容器是 Grid，确认
grid-template-columns没用minmax(0, 1fr)这类可能压缩列宽的写法，否则left参照的列边界会塌缩
iOS Safari 下 left粘不住，得补-webkit-sticky和触发重绘
iOS Safari（尤其 15.4 之前版本）对 left 方向的 sticky 支持极不稳定：滚动过程中元素可能突然跳回原始位置，或首次滚动时不响应。这不是代码错，是渲染管线缺陷。
- 必须同时声明
position: -webkit-sticky和position: sticky，且-webkit-sticky在前 - 给元素加
will-change: transform或transform: translateZ(0)强制硬件加速，能显著改善 iOS 上的响应一致性 - 避免在该元素上同时使用
filter或backdrop-filter—— 它们会创建新层叠上下文，切断 sticky 链
最易被忽略的一点：sticky 的 left 偏移是相对于其**最近的块级包含块**计算的，而不是父元素的 padding 边缘。如果父容器有 padding-left，而你希望元素贴着可视区左边缘，就得把 left 设为负值（如 left: -20px）来抵消——这个细节在嵌套较深的 UI 组件里经常导致“明明写了 left: 0 却没贴边”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
