多级 sticky 标题吸顶失效主因是祖先元素触发锚定链断裂：overflow、transform、flex/gird 容器会截断 sticky，且各级标题需按原始位置设不同 top 值并共用非 flex/grid 父容器，同时用 margin-top 避免内容重叠。
直接给多级分类标题加 position: sticky 很大概率不吸顶——不是写法错了，而是 sticky 的锚定链被某层祖先悄悄截断了，尤其是响应式场景下 overflow、transform、flex 容器的组合更容易触发失效。
为什么一级标题吸顶了，二级标题滚走了？
sticky 元素不共享“固定空间”，而是按 DOM 顺序和 top 值接力生效：后一个元素的 top 是从它**原始位置**算起的，而这个原始位置已被前一个吸顶元素推高。
- 一级标题设
top: 0，高度含 padding/border 约 48px → 二级标题原始位置已下移 48px - 二级标题必须设
top: 48px（不能是top: 0），否则它一滚动就“钻”到一级标题底下 - 若一级标题高度响应式（如移动端缩为 40px），二级的
top也得响应式：用top: calc(1em + 24px)或 CSS 自定义属性动态传值 - 所有 sticky 标题必须共用同一个父容器，且该父容器不能是
display: flex或display: grid的直接子项（Safari/旧 Edge 下会干扰锚定）
响应式下 sticky 失效的隐藏元凶
移动端或小屏切换时，常见布局重构会意外引入 sticky 阻断器：
-
overflow: hidden出现在.category-list或#app层——删不掉就换overflow: clip（Chrome 99+、Safari 15.4+、Firefox 97+ 支持） - 为实现“折叠菜单”加了
transform: translateY(0)或will-change: transform→ 创建新层叠上下文，sticky 失效 - 用
height: 100vh限制列表容器高度 → Safari 对 vh 在地址栏收放时重算不准，导致可滚动上下文丢失 - 响应式媒体查询里改了父容器
display（如 desktop 用 block，mobile 切 flex）→ sticky 锚定链断裂
多级吸顶后内容重叠或留白怎么修？
position: sticky 不脱离文档流，吸顶后仍占原始位置空间。后续内容若没避让，就会被遮挡或出现空白。
- 给紧跟在 sticky 标题后的第一个内容块加
margin-top，值等于该标题自然高度（含 padding/border） - 避免写死像素值：一级标题用
margin-top: calc(1.2em + 16px)，二级标题单独加 class 并设margin-top: calc(1em + 12px) - 别用 JS 动态改
height或margin来适配——这会破坏 sticky 的布局锚点，改用transform: scale()+transition - 如果标题内嵌图标或徽标导致高度波动，用
min-height+box-sizing: border-box锁定最小占位
真正难的不是写出 position: sticky，而是排查哪一层祖先偷偷加了 overflow: auto、transform 或 display: flex ——这些在桌面端可能正常，一到 iOS Safari 或安卓 WebView 就集体失联。建议用浏览器开发者工具的“Computed”面板逐层检查 overflow 和 transform，而不是只看 Styles 面板里的显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
