position: sticky在局部容器内生效的必要条件是：容器需有明确高度且overflow为auto/scroll/overlay；否则sticky退化为relative。
sticky在局部容器内生效的必要条件
position: sticky 默认只相对于视口（viewport）做吸顶，想让它在某个 <div> 内部滚动时“粘住”，必须满足两个硬性前提：
- 该容器本身设置了明确的高度（比如
height或max-height），且内容超出这个高度形成滚动 - 该容器的
overflow必须是auto、scroll或overlay（不能是visible或hidden）
否则，浏览器根本不会触发局部滚动上下文，sticky 就会退化为 relative 行为。
为什么给父容器加overflow: auto还不够
即使父容器有高度和 overflow: auto，sticky 元素仍可能“粘不住”，常见原因有：
- 父容器用了
transform、filter、will-change等属性，这会创建新的层叠上下文（stacking context），间接阻止sticky定位参考系向上冒泡到该容器 - 父容器没有设置
contain: layout paint，某些浏览器（如旧版 Safari）在复杂布局中会错误判断滚动边界 -
sticky元素的top值过大，超出了父容器可滚动范围，导致它始终处于“未到达吸附位置”状态
示例中应写成：
立即学习“前端免费学习笔记（深入）”；
.scroll-container {
height: 400px;
overflow: auto;
/* 避免 transform 干扰 */
transform: none;
}
.sticky-header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}Firefox 和 Safari 的兼容性陷阱
Firefox 从 v68+、Safari 从 v14.1+ 才完整支持局部 sticky，但仍有细节差异：
- Safari 在父容器使用
flex或grid布局时，偶尔忽略top值，需额外加align-self: flex-start - Firefox 对嵌套滚动容器中的
sticky更敏感，若父容器外还有overflow: hidden的祖先，sticky可能完全失效 - 两者都不支持
sticky在table-row或table-cell上生效，必须用块级元素包裹
实际开发中，如果目标用户包含大量 iOS 13–14 设备，建议降级为 JS 监听 scroll + 动态切 position: fixed。
滚动容器内多个sticky元素的层级冲突
当一个局部滚动容器里有多个 position: sticky 元素（比如表头 + 分组标题），它们会按 DOM 顺序依次吸附，但容易出现遮挡或错位：
- 后面的
sticky元素会覆盖前面的，除非显式设置不同z-index - 如果它们的
top值相同，浏览器行为不一致：Chrome 保持顺序堆叠，Safari 可能重排 - 更隐蔽的问题是：当容器滚动到某处，前一个
sticky已脱离吸附区，后一个刚进入，中间会出现空白间隙
稳妥做法是让每个 sticky 的 top 值严格递增（如 top: 0、top: 48px、top: 96px），并统一用 z-index 控制叠层。
局部 sticky 不是“设了就灵”，它的行为高度依赖父容器的渲染上下文是否干净——哪怕一行 transform: translateZ(0) 都可能让它彻底失灵。
