sticky在横向滚动容器中不起作用是因为它只响应left值而非top值，且需父容器设置overflow-x: auto、成为最近定位上下文祖先，并确保sticky元素设left: 0且不被压缩。
sticky在横向滚动容器里为什么不起作用
因为 position: sticky 的吸顶行为只对「滚动方向的最近块级祖先」生效，而默认情况下浏览器滚动是垂直的（y轴），sticky 只响应 top/bottom 值；横向滚动（overflow-x: auto）时，top 不触发吸顶，left 才管用——但前提是容器本身支持横向滚动且有明确的滚动上下文。
必须满足的三个前提条件
缺一不可，否则 sticky 看似写了却完全没反应：
- 父容器需设置
overflow-x: auto（或scroll），且不能是hidden - 该父容器必须是
sticky元素的**最近定位上下文祖先**（即不能被transform、filter、will-change等属性意外创建新层叠上下文或隔离滚动） -
sticky元素自身要声明left: 0（不是top: 0），并确保其宽度不超出容器可视区（否则无法“贴住”左侧）
常见错误：横向吸顶后内容错位或卡住
典型现象是元素吸顶了，但右侧内容被遮挡、文字截断，或滚动时突然跳动。原因多为：
- 父容器用了
display: flex但没设flex-shrink: 0，导致子项被压缩，left: 0失效 -
sticky元素内部有white-space: nowrap+overflow: hidden，但未配合min-width: fit-content，造成布局塌陷 - 横向容器设置了
scroll-snap-type: x mandatory，干扰了sticky的滚动锚定逻辑 - 在 Safari 中，若父容器有
backface-visibility: hidden，可能意外禁用sticky横向行为（iOS 16.4+ 修复，但旧版本仍存在）
一个可靠可用的最小示例
以下代码在 Chrome/Firefox/Safari（iOS 16.5+）中均能稳定实现横向吸顶：
立即学习“前端免费学习笔记（深入）”；
<div class="scroll-container">
<div class="sticky-header">ID</div>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
.scroll-container {
display: inline-flex;
overflow-x: auto;
scroll-behavior: smooth;
}
.sticky-header {
position: -webkit-sticky;
position: sticky;
left: 0;
background: #fff;
z-index: 10;
flex-shrink: 0;
min-width: 60px;
padding: 8px 12px;
box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.item {
flex-shrink: 0;
width: 120px;
padding: 8px 12px;
margin-left: 1px;
}
关键点：inline-flex 避免外层块级流干扰、flex-shrink: 0 锁死尺寸、min-width 防止内容挤压导致 left: 0 失效。
横向 sticky 是 CSS 中少数几个仍受浏览器实现差异影响的特性，尤其在移动端 WebView 或旧版 Safari 中，建议始终用 left + flex-shrink: 0 + 显式宽高兜底，别依赖自动计算。
