多个 position: sticky 元素为什么堆叠错乱？
因为 sticky 元素的堆叠上下文（stacking context）默认由其最近的「定位祖先」或「块级容器」决定，而不是全局文档流。当多个 sticky 元素处于同一父容器内，且没有显式设置 z-index，它们会按 DOM 顺序层叠——后出现的覆盖先出现的，和预期“头部始终在最上”相悖。
- 常见错误现象：
section的 sticky 标题被下方另一个 sticky 的.sub-header盖住，滚动到某位置时突然消失 - 必须给每个 sticky 元素单独设置
z-index，且数值严格递减（如标题z-index: 10，子标题z-index: 9） - 父容器不能是
transform、filter或will-change触发的新 stacking context，否则 sticky 会被截断在该上下文内 - Chrome 和 Safari 对嵌套 sticky 的 stacking 行为一致，但 Firefox 在某些版本中会忽略同级 sticky 的
z-index优先级，需加contain: layout强制隔离
如何让多级 sticky 头部不互相遮挡又保持语义结构？
关键不是靠父容器统一控制，而是用「层级分离 + 显式 z-index + 容器边界重置」三步锚定视觉顺序。
- 每个 sticky 区块（如
.section-header、.group-header）都设为独立的position: sticky，不要嵌套在同一个 sticky 父元素里 - 所有 sticky 元素的父容器（通常是
section或div）必须有明确高度或最小高度（哪怕min-height: 1px），否则部分浏览器会塌陷导致 sticky 失效 - 为避免父容器意外创建 stacking context，禁用
opacity、transform等属性；若必须用，改用translateZ(0)替代translateY(0) - 示例结构：
<div class="list"> <header class="section-header" style="position: sticky; top: 0; z-index: 10;">A组</header><div class="items">...</div> <header class="group-header" style="position: sticky; top: 48px; z-index: 9;">A-1类</header><div class="items">...</div> </div>
top 值怎么设才不会让下一级 sticky 挤掉上一级？
top 不是固定像素值，而是相对于「当前 sticky 元素所在流位置」的偏移。如果上级 sticky 高度动态变化（比如字体缩放、行高调整），硬写 top: 64px 必然错位。
- 绝对禁止用固定
top模拟“堆叠”，例如top: 0、top: 64px、top: 128px—— 这会导致滚动过程中某段空白或重叠 - 正确做法：每一级 sticky 的
top都设为0，靠z-index控制谁在前；视觉上的“错开”由它们在 DOM 中的位置自然形成（即上一级 sticky 元素本身占据空间，下一级 sticky 在它下面开始贴顶） - 若需“悬浮间距”，用
margin-top或padding-top调整内容区，而非调top - 兼容性提示：Safari 15.4+ 支持
top: env(safe-area-inset-top)，但多个 sticky 同时用时需确保各env()值不冲突
移动端 iOS Safari 下 sticky 堆叠突然失效怎么办？
iOS Safari 对 sticky 的实现更保守：一旦父容器有 overflow: auto 或 scroll-behavior: smooth，就可能中断 sticky 链，导致只有第一个生效。
- 检查是否在
.list或外层容器误加了overflow-y: auto—— sticky 要求滚动容器是 viewport 本身，或明确指定滚动上下文为body/html - 禁用
scroll-behavior: smooth，它会让 Safari 放弃对 sticky 元素的持续追踪 - 给所有 sticky 元素加
backface-visibility: hidden，可绕过某些渲染管线 bug - 极端情况可降级：用 IntersectionObserver 监听滚动位置，手动切换
position: fixed，但仅当真正遇到不可解的堆叠断裂时才启用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
