多个position: sticky元素不能同时吸顶，是因为它们按DOM顺序和top值“接力”吸顶：后一个元素的top基于其被前一个吸顶元素推高的原始位置计算，而非视口顶部。
多个 position: sticky 元素为什么不能同时吸顶？
浏览器只允许一个 position: sticky 元素在视口顶部“生效”，后一个元素的 top 值是相对于它**原始位置**计算的，而这个原始位置已被前一个吸顶元素推高。所以它们不是“抢占”，而是“接力”——前一个吸顶后，后一个才开始计算自己是否达到 top 阈值。
常见错误现象：section-header-2 一滚动就消失，或卡在半空；开发者误以为是 z-index 冲突，其实根本没触发 sticky 行为。
-
sticky不依赖z-index实现层叠，它靠 DOM 顺序 +top值自然衔接 - 所有吸顶元素必须设
top（哪怕都是top: 0），否则不生效 - 父容器不能有
overflow: hidden、transform或opacity < 1，否则直接禁用 sticky
如何让分类标题“无缝接力”吸顶？
关键不是控制谁在上，而是确保每个标题的 top 值与它在 DOM 中的位置逻辑一致。例如：第一个标题 top: 0，第二个标题如果紧贴其后，也设 top: 0 即可自动接棒；但如果中间隔了 20px margin，则第二个标题需设 top: -20px 才能视觉对齐——但更稳妥的做法是用 margin-top: 0 彻底清空间隔。
- 统一用
top: 0，并通过清除相邻元素的 margin/padding 来保证 DOM 位置紧凑 - 避免给 sticky 元素设
height或min-height，防止撑开空白导致“悬停错位” - 移动端 Safari 对连续 sticky 支持较弱，建议加
-webkit-backface-visibility: hidden触发硬件加速
sticky 和 fixed 混用时为什么第二级吸顶失效？
一旦某个祖先元素用了 position: fixed（比如全局导航栏），它会脱离文档流，导致后续 sticky 元素的“原始位置”计算基准偏移——此时 sticky 的 top 是相对于 fixed 元素下方的空间起算，而非页面真实滚动位置。
立即学习“前端免费学习笔记（深入）”；
- 不要把 sticky 元素嵌套在
position: fixed或position: absolute容器内 - 检查开发者工具中该元素的 “Computed” 面板，确认
position确实解析为sticky，而不是回退成static - 若必须混用，用 JavaScript 监听
scroll+getBoundingClientRect()手动切换position: fixed，绕过 sticky 限制
为什么有些 sticky 元素在滚动到一半就“掉下去”？
最常被忽略的是父容器的 overflow 层级链。即使你没给直接父级设 overflow: hidden，只要任意上层祖先（比如 .layout 或 #app）设置了 overflow: hidden、transform: translateZ(0) 或 will-change: transform，就会创建新的层叠上下文并截断 sticky 行为。
调试时先临时移除所有祖先的 overflow 和 transform，再逐个加回定位问题源头。这不是 bug，是规范行为——sticky 必须在“滚动容器”内生效，而这些属性会让浏览器认为该容器就是滚动边界。
