sticky 在多级列表中只对第一级生效，是因为子列表缺乏滚动约束（如 overflow 和高度限制），无法形成独立滚动上下文，导致内层元素无法触发 sticky 定位。
sticky 在多级列表中为什么只对第一级生效？
因为 position: sticky 的吸顶行为依赖于最近的「有滚动约束的祖先容器」，而多级列表（比如嵌套的 <ul><li><ul></ul></li></ul>）里，子列表通常没有设置 overflow 或高度限制，浏览器默认不把它当滚动上下文——结果就是只有最外层 <li> 能吸顶，内层全失效。
常见错误现象：sticky 元素在滚动时直接“飞走”或完全不动，控制台无报错，但 DevTools 里能看到 position 被降级为 static。
- 必须给每一级需要吸顶的容器（如每个
<li>）显式设置top值，不能留空或设为0（否则在部分 Safari 中失效） - 每一级父
<ul></ul>需要设overflow-y: auto且有明确高度（或max-height），否则无法形成局部滚动上下文 - 避免父容器设
transform、perspective或filter，这些会创建新的层叠上下文并阻断sticky计算
如何让二级、三级列表项独立吸顶不互相覆盖？
关键不是“堆叠”，而是控制每级吸顶的 z-index 和触发时机。默认所有 sticky 元素共用同一个滚动容器，吸顶后会按 DOM 顺序层叠，容易遮挡下级标题。
- 给每级吸顶元素设不同
z-index：一级z-index: 10，二级z-index: 20，三级z-index: 30 - 用
top错开吸顶位置：一级设top: 0，二级设top: 40px（预留一级标题高度），三级设top: 80px - 确保各级父容器的
overflow-y: auto是独立启用的，而不是只在最外层加一次 - 不要依赖
will-change: transform优化，它在某些 Chrome 版本中会导致sticky失效
移动端 Safari 下 sticky 吸顶失效的典型修复点
iOS 15.4+ 修复了大部分问题，但老版本（尤其是 iOS 13–14）仍存在两个硬伤：嵌套 sticky 不触发、滚动容器未设 -webkit-overflow-scrolling: touch 时行为异常。
- 给每个滚动容器（即每级
<ul></ul>）加上-webkit-overflow-scrolling: touch -
top值必须是具体数字（如top: 12px），不能是百分比或em单位 - 避免在
sticky元素上同时使用display: flex+align-items: center，Safari 可能计算错误导致偏移 - 如果用 Vue/React 动态渲染列表，确保元素挂载完成后再触发滚动，否则初始
offsetTop可能为 0 导致吸顶位置错乱
实际代码中容易漏掉的兼容性细节
很多人写了 position: sticky 就以为完事了，但真正上线时发现 Firefox 滚动卡顿、Safari 标题闪动、Chrome 偶尔失灵——问题常出在边界条件没兜住。
- 必须为
sticky元素设width: 100%或明确宽度，否则在 Flex 容器中可能收缩导致吸顶区域错位 - 父容器若用了
contain: layout paint，会阻止sticky定位计算，需移除或改用contain: style - 不要在
sticky元素上设margin-bottom，它会影响吸顶后的实际占位高度，造成下方内容跳动 - 测试时务必用真机滚动（尤其 iOS），模拟器和桌面 Chrome 的
sticky行为差异很大
多级 sticky 最难调的其实是层级节奏：哪一级该停、哪一级该让、滚动速度变化时如何避免视觉撕裂。这些没法靠单个 CSS 属性解决，得结合容器高度、top 偏移、z-index 和滚动事件微调。别指望写完就稳，真机反复滚十次才能看出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
