一级标题吸顶而二级标题滚走，是因为二者不在同一可滚动祖先容器内，导致sticky锚定链断裂；必须将多级标题统一包裹在具备滚动能力且无overflow:hidden/transform的共同父容器中，并按高度顺序设置top值（如.level-1 top:0、.level-2 top:48px）以实现接力吸顶。
为什么一级标题吸顶了，二级标题却滚走了？
根本不是二级标题没加 position: sticky，而是它和一级标题没在同一个「锚定链」里。sticky 元素只相对于**最近的可滚动祖先容器**生效，如果一级标题在 .section-1 里，二级标题在另一个 .section-2 里，它们各自找父容器——很可能找不到同一个滚动上下文，结果就是各自为政、互不接力。
必须确保所有要吸顶的标题（.level-1、.level-2、.level-3）都包裹在同一个父容器内，且该容器具备滚动能力（比如设了 max-height 和 overflow-y: auto），同时自身不能有 overflow: hidden 或 transform 等阻断属性。
- 检查共同父容器是否设置了
overflow: visible（默认值）或至少不是hidden/auto/scroll - 确认该父容器没有
transform、filter、will-change——这些会创建新层叠上下文，切断 sticky - 避免让这个父容器成为
display: flex或display: grid的直接子项（部分 Safari/旧 Chrome 下会干扰定位计算）
多级标题如何“接力”而不重叠或错位？
sticky 不是“一起贴顶”，而是按 DOM 顺序和 top 值逐个触发：前一个吸顶后，后一个的原始位置被推高，它的 top 是从这个新位置开始算的。所以不能全设 top: 0。
假设一级标题高度为 48px（含 padding/border），二级标题高度为 36px，那么：
-
.level-1设top: 0 -
.level-2设top: 48px（不是36px，也不是0） -
.level-3若紧接在二级之后，且二级已吸顶，则设top: 84px（48 + 36）
注意：这些 top 值必须是固定像素或 rem，避免用 em 或混合单位（如 calc(48px + 1rem)），iOS Safari 对某些组合解析不稳定。
吸顶后内容上钻、遮挡或留白严重怎么办？
position: sticky 不脱离文档流，吸顶后仍占原始位置空间。后续内容不会自动下移——这是设计行为，不是 bug。你看到遮挡，是因为没给后面元素预留空间；看到留白，是因为你误以为它“腾空”了。
解决方式统一且简单：给紧接在吸顶标题之后的首个内容元素加 margin-top，值等于该标题的渲染高度。
- 若标题高度固定（如
48px），直接写margin-top: 48px - 若高度响应式（如多行文字、折叠展开），改用
padding-top+box-sizing: border-box更稳妥 - 绝对不要用 JS 动态改
height或margin来适配——这会破坏 sticky 的锚点计算，导致跳变或失效
iOS Safari 和 Firefox 的兼容性现实
Chrome 99+ 支持 th、td 上的 top: 0，但 tr 仍不支持；Firefox 至今（2026 年）对表格内 sticky 完全不支持；iOS Safari 15.2–15.3 存在吸顶错位、卡顿甚至不可恢复的严重 bug，@supports (position: sticky) 检测不到这个问题。
真正能跨浏览器跑通的方案只有一个：放弃原生 table 结构，用 div 模拟表头和主体，把多级标题都放在同一个 display: block 容器里，并严格控制列宽同步（靠硬编码 width 或 JS 读取 getBoundingClientRect().width）。
最易被忽略的点：吸顶效果是否成立，90% 取决于你有没有在某个看不见的祖先节点（比如 #app、overflow: hidden ——它比任何 CSS 写法都更有“杀伤力”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
