sticky横向滚动错位因table未创建滚动上下文，需设table为block+overflow-x:auto并重置tbody/tr的display；sticky列须加background和z-index；Flex/Grid父容器overflow:hidden会禁用right锚点；iOS需-webkit-sticky前缀及明确right像素值。
sticky 在横向滚动时错位，基本是 table 或 div 容器没正确暴露滚动上下文——不是 right 值写错了，是 sticky 根本没锚定到你期望的容器上。
为什么 table 里加 right: 0 没反应
默认 table 元素不创建滚动上下文，tbody 和 tr 更不会。浏览器会一路往上找，直到某个 overflow-x: auto 的外层 div 才停下，结果 sticky 元素被吸在那个 div 的右边缘，而不是表格最右侧列。
- 直接给
th或td加position: sticky; right: 0无效，因为它的“最近可滚动祖先”不是表格本身 - 必须让
table自己变成滚动容器：设display: block+overflow-x: auto -
thead、tbody、tr要全部显式设回display: table，否则语义和对齐全乱 - 操作列单元格必须加
white-space: nowrap，否则内容换行会撑宽列，破坏right: 0的对齐基准
sticky 右侧悬停时背景透出怎么办
横向滚动时，左侧列内容会从 sticky 列背后滑过，看起来像“穿模”。这不是定位问题，是图层叠加缺失。
- 必须给 sticky 列加
background（纯色或渐变），否则透明底会让底层内容露出来 -
z-index要显式设为正数（比如z-index: 1），不能依赖默认值 - 避免用
rgba(0,0,0,0.1)这类半透背景——它无法完全遮盖滚动中的相邻列 - 如果用了 CSS 变量控制主题色，确保
background值在深色/浅色模式下都足够不透明
Flex/Grid 容器里 sticky 右对齐失效
当 sticky 元素放在 display: flex 或 display: grid 的父容器中，且该父容器又设了 overflow: hidden（常见于卡片、弹窗），right 锚点会直接失效，计算后 position 变成 static。
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否隐式设置了
overflow: hidden（比如 Ant Design 的.card、.ant-modal-body） - 临时加
overflow: visible !important验证：如果 sticky 立刻恢复，就坐实是 overflow 截断 - 不能删
overflow: hidden时，用clip-path: inset(0)替代——视觉裁剪效果一致，但不创建新块格式化上下文（BFC） - 若父容器是 Flex，给 sticky 元素加
align-self: flex-end或justify-self: end（Grid），否则它可能被居中或拉伸，导致right: 0基准偏移
iOS Safari 下 sticky 右侧吸附抖动或延迟
iOS Safari 对 position: sticky 的实现更保守，尤其在横向滚动场景下，常出现“卡顿一帧”“闪一下就掉下去”或根本不动。
- 必须加
-webkit-sticky前缀：position: -webkit-sticky; position: sticky; -
right值不能为百分比或auto，必须是明确像素值（如right: 0或right: 16px） - 避免父容器有
transform、filter或will-change，这些会隔离层叠上下文，iOS 下尤其敏感 - 横向滚动容器要设
scroll-snap-type: x mandatory并配合scroll-snap-align: start，能缓解 iOS 滚动惯性导致的 sticky 同步延迟
横向 sticky 最容易被忽略的点：它不依赖视口宽度，而依赖滚动容器的内部宽度。哪怕容器 width 是 100%，只要子项总宽度没超出它，overflow-x 就不会触发，sticky 的 right 根本没机会生效。
