多个sticky元素“叠着吸顶”是因为它们均相对于同一滚动祖先独立计算top值，后一个元素的原始位置被前一个吸顶元素推高，导致触发时相互挤压；需按视觉层级递增设置top（如0、52px、104px），并确保父容器有高度且无overflow:hidden。
为什么多个 position: sticky 元素会“叠着吸顶”而不是同时固定？
因为 position: sticky 不是全局固定，而是相对于**最近的滚动祖先容器**生效，并且每个 sticky 元素的 top 值是独立计算的。当多个 sticky 元素出现在同一滚动流中，后一个元素的 top 是从它自身原始位置开始算起的——而它原始位置，可能已经被前一个 sticky 元素“推高”了。
比如：主标题设 top: 0，子标题设 top: 40px，实际效果是子标题在主标题下方 40px 处触发吸顶；一旦主标题吸顶并占据顶部空间，子标题滚动到距父容器顶部 40px 时，就会把主标题向上“顶”，自己卡进顶部第二层位置。
top 值怎么设才不会错位或跳变？
关键不是“绝对值”，而是各 sticky 元素之间的**垂直间距关系**。必须确保：
- 所有 sticky 元素的父容器有明确高度，且未设置
overflow: hidden - sticky 元素自身不能是
display: flex或grid的直接子项（某些浏览器下 flex 容器会干扰 sticky 行为） - 多个 sticky 元素的
top值应按视觉层级递增，例如：top: 0、top: 52px、top: 104px，其中 52px 是上一级吸顶后的高度（含 padding/border） - 如果某级标题吸顶后需要缩放或变色，用
transform+transition，别改height或margin，否则会破坏 sticky 的布局锚点
移动端或微信小程序里 sticky 失效的常见原因
不是兼容性问题，而是环境约束被悄悄违反了：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
scroll-view（小程序）或overflow-y: scroll但没设固定高度 → sticky 无滚动上下文，退化为relative - 设置了
contain: paint或will-change: transform→ 某些 WebKit 内核会禁用 sticky - 标题元素外层套了
view（小程序）或div并加了position: relative→ sticky 元素会相对于这个相对定位父级计算，而非视口 - 使用了
transform: translateZ(0)强制硬件加速 → 在 iOS Safari 15.4–16.3 中会导致 sticky 失效
吸顶标题和内容区域之间出现“空隙”或“遮挡”怎么办？
这是 sticky 最容易被忽略的副作用：它不脱离文档流，但吸顶后仍占原始位置空间。若后续内容没做避让，就会重叠或留白。
解决方式分两种场景：
- 纯 CSS 场景：给紧跟在 sticky 标题之后的内容块加
margin-top，值等于该 sticky 元素的自然高度（含 padding/border），确保滚动时内容不钻进标题底下 - JS 辅助场景（如需动态适配）：监听
scroll，检查当前激活的 sticky 元素是否已吸顶（通过getBoundingClientRect().top <= 0），再动态切换内容区的padding-top - 特别注意：不要用
z-index强行压栈来“盖住”空隙——这只会掩盖布局逻辑缺陷，且在多层 sticky 下极易失控
真正难的从来不是写对 position: sticky，而是确认它到底“粘在哪一层”、以及那一层是否真的在滚动。很多失效，源头都在滚动容器的 overflow 和高度没配对上。
