position: sticky 失效主因是祖先容器设置 overflow: hidden/auto/scroll 切断锚定链，需逐层检查并改用 overflow: clip；多标题接力吸顶需按 dom 顺序设不同 top 值，且共用父容器不能为 flex/grid 直接子项；吸顶后内容重叠需用 margin-top 避让，避免 js 动态改 height。
position: sticky 在长列表中实现分类标题吸顶，核心不是“能不能用”，而是“为什么没吸住”——绝大多数失效场景都出在祖先容器上。
为什么加了 position: sticky 和 top: 0 标题还是滚走了？
根本原因不是 CSS 写错了，而是某个祖先元素切断了粘性锚定链。只要从标题向上查到的任意一层（包括 body、#app、框架滚动容器、外层 div）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，sticky 就会退化为 relative。
- 用浏览器开发者工具逐层检查祖先节点的
overflow值，重点看body和列表直接父容器 - 临时删掉可疑的
overflow声明，确认是否恢复吸顶；不能删就换用overflow: clip（现代浏览器支持，不阻断 sticky） - React/Vue 中常见于
<keep-alive></keep-alive>、<router-view></router-view>或虚拟滚动组件的包裹层，它们常自带overflow
多个分类标题如何“接力吸顶”而不互相挤压？
多个 position: sticky 元素不会同时固定在顶部，而是按 DOM 顺序和 top 值“接力”：后一个元素的 top 是从它原始位置算起的，而这个原始位置已被前一个吸顶元素推高。
- 一级标题设
top: 0，二级标题设top: 52px（假设一级高度 + padding/border = 52px） - 确保所有 sticky 元素的**共同父容器**有明确高度、未设
overflow: hidden，且自身不是display: flex或grid的直接子项（部分浏览器下会干扰） - 不要靠 JS 动态改
height或margin来缩放标题——这会破坏 sticky 的布局锚点，改用transform: scale()+transition
吸顶后内容往上钻、遮挡或留白怎么办？
position: sticky 不脱离文档流，吸顶后仍占原始位置空间。后续内容若没避让，就会重叠或出现空白。
- 给紧跟在 sticky 标题之后的内容块加
margin-top，值等于该标题的自然高度（含 padding/border） - 如果标题高度动态变化（如响应式字号），避免用固定像素值，改用
margin-top: calc(1em + 16px)等相对单位 - 别指望
IntersectionObserver做降级——它触发滞后，会出现“闪一下再吸顶”的断裂感
移动端或小程序里 sticky 失效的隐藏陷阱
不是兼容性问题，而是环境约束被悄悄违反：
- 微信小程序中用了
scroll-view但没设固定height→ sticky 无滚动上下文，直接退化 - 父容器加了
contain: paint或will-change: transform→ WebKit 内核可能禁用 sticky - 标题外层套了
view或div并设了position: relative→ sticky 参照系变成这个相对定位父级，而非滚动容器 - 写了
transform: translateZ(0)强制硬件加速 → iOS Safari 15.4–16.3 中 sticky 完全失效
真正麻烦的不是写几行 CSS，而是要同时盯住 DOM 结构、祖先样式、框架行为和运行时环境——任何一个环节出错，sticky 就静默失效，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
