position: sticky 的 left 不生效，主因是父容器未设 overflow-x: auto 或触发了层叠上下文（如 transform、filter），或存在 padding/border 干扰；需清空滚动容器内边距、设显式宽度、table-layout: fixed，并注意 safari 兼容性。
横向滚动容器里 position: sticky 的 left 不生效？先确认父容器是否设了 overflow-x: auto 且没触发层叠上下文
横向滚动容器中让标题固定在左侧（比如表格首列冻结），position: sticky 配合 left: 0 看似合理，但常完全没反应。根本原因不是写法错，而是 sticky 的“粘性”依赖于**最近的具有滚动能力的祖先容器**，且该祖先不能是 transform、filter、will-change 等创建新层叠上下文的元素——这些属性会切断 sticky 的锚定链。
实操建议：
- 确保横向滚动容器（如
<div class="scroll-container">）设置了 <code>overflow-x: auto（或scroll），且 没有 同时设置transform: translateZ(0)、filter: opacity(1)或will-change: transform - 检查该容器的父级是否意外加了
contain: layout paint—— 这也会阻断sticky行为 -
sticky元素自身必须有明确宽度（如width: 120px），否则在 flex 或 grid 中可能坍缩导致定位失效 - 把滚动容器的
padding-left和border-left全部清零，改用内部子容器补白 - 或者直接用
left: -20px抵消（不推荐，维护性差） - 更稳妥的做法：给 sticky 元素加
margin-left: -20px，再配left: 0，这样逻辑清晰且不影响布局流 - 必须给
<table> 设置 <code>table-layout: fixed - 必须给第一列（
th:first-child,td:first-child）设置明确宽度，例如width: 140px；仅靠min-width不够 - 所有
<th> 和 <code><td> 都需要设 <code>white-space: nowrap+overflow: hidden+text-overflow: ellipsis，否则长文本会撑破固定列宽 - 避免对
<tbody> 或 <code><tr> 使用 <code>display: block—— 这会让表格语义断裂，sticky 失效兼容性与降级：Safari 15.4+ 才支持
sticky在overflow-x容器中的left/right旧版 Safari（≤15.3）和部分安卓 WebView 对横向 sticky 的支持极差：即使代码完全正确，
left也始终无效，表现和relative一样。这不是 bug，是规范实现滞后。判断是否需降级：
- 用
@supports (position: sticky) and (left: 0)做 CSS 检测（注意：这个条件在旧 Safari 里会返回 true，但实际不工作） - 更可靠的是 JS 检测：
const div = document.createElement('div'); div.style.cssText = 'position:sticky;left:0'; console.log(div.style.position === 'sticky' && div.style.left === '0');—— 但依然不能保证运行时行为正常 - 生产环境建议：对 iOS position: absolute + 动态
left更新（注意性能，要用requestAnimationFrame节流）
真正麻烦的不是写法，而是当
sticky看似生效、却在某个 iOS 版本里突然失效时，很难从 DevTools 里看出问题——它不报错，只是静静躺平。 - 用
为什么 left: 0 在横向滚动时“不动”，其实是被滚动容器的 padding-left 或 border-left 干扰了
position: sticky 的偏移值（left / right）是相对于其**包含块的内边距盒（padding box）左边缘**计算的。如果滚动容器本身有 padding-left: 20px，那 left: 0 实际会让元素贴在距离容器左边框 20px 的位置，而不是视觉上“最左端”。
常见现象：标题看起来“卡在中间”，向左滚动时它跟着动了一段才停下。
解决办法：
表格场景下冻结首列，sticky 必须配合 table-layout: fixed 和显式 width
HTML 表格（<table>）默认是自动布局，列宽由内容撑开，此时 <code>th:first-child { position: sticky; left: 0; } 很可能只在部分浏览器生效，或滚动时列宽跳变。
关键约束：
