多级列表中 position: sticky 失效，是因为 sticky 仅在最近的可滚动祖先容器内生效，无法穿透父级边界；.group 无滚动上下文时，其子元素的 sticky 不会向上作用于外层滚动容器。
不能直接用 position: sticky 实现多级列表的“分组吸顶”——因为 sticky 只对最近的滚动容器内单层元素生效，嵌套层级会中断粘性行为。
为什么多级列表里 position: sticky 会失效
常见结构如 <ul class="list"><li class="group">
<h3>A</h3>
<ul>
<li>A1</li>
<li>A2</li>
</ul>
</li></ul>，如果给 .group > h3 设 position: sticky，它只在 .group 这个父容器内“相对粘住”，而 .group 本身没设 overflow 或滚动上下文，sticky 就完全不触发；即使外层有滚动容器，sticky 也**不会穿透父级边界**向上作用。
- sticky 的“粘性锚点”是其**最近的具有滚动能力的祖先容器**（即
overflow: auto|scroll|overlay且高度受限） - 如果中间某层父元素设置了
overflow: hidden或未限制高度，sticky 元素就失去参照，退化为static - 多级列表中，
<h3></h3>的父级往往是<li class="group">，它默认不滚动也不限高，sticky 无法激活
正确做法：扁平化结构 + 单层 sticky
放弃嵌套 DOM 结构，把所有分组标题和条目拉平为同级元素，再用 CSS 控制视觉层级。这是目前最稳定、兼容性最好（Chrome 56+、Firefox 59+、Safari 15.4+）的方案。
- HTML 结构改为：
<div class="flat-list"> <div class="group-header" data-group="A">A</div> <div class="item">A1</div> <div class="item">A2</div> <div class="group-header" data-group="B">B</div> <div class="item">B1</div> </div> - CSS 中给
.group-header加：position: sticky; top: 0; z-index: 1; background: #fff; - 必须确保
.flat-list有明确高度限制和overflow-y: auto，否则 sticky 不会计算滚动上下文 - 避免给
.group-header设置margin-bottom，否则 sticky 区域会留白；改用padding-bottom或相邻.item的margin-top
遇到 z-index 被截断或重叠怎么办
sticky 元素的 z-index 受限于其**包含块（containing block）的堆叠上下文**。如果 .flat-list 或其某级父元素有 transform、opacity 、<code>will-change 等属性，就会创建新堆叠上下文，导致 z-index 在内部生效但无法盖过外部元素。
立即学习“前端免费学习笔记（深入）”；
- 检查
.flat-list的所有祖先元素，移除不必要的transform: translateZ(0)或opacity: 0.99 - 若必须保留某些效果，可在
.flat-list上显式添加isolation: isolate，防止意外创建堆叠上下文 - sticky 标题的
background必须不透明（如#fff），否则滚动时可能透出下方内容
需要支持 Safari 15.3 及更早版本？加 -webkit-sticky
Safari 15.3 对 position: sticky 的实现有 bug：当 sticky 元素是 flex 或 grid 子项时，top 偏移可能失效。虽然现在多数项目已不需兼容，但若真遇到，可加前缀兜底：
`.group-header {
position: -webkit-sticky;
position: sticky;
top: 0;
}`
注意：仅 Safari 15.3–15.4 需要该前缀；iOS 15.4+ 和 macOS Monterey 12.3+ 已原生支持标准语法。别在现代项目里无脑加前缀，反而可能触发旧版 bug。
真正麻烦的是动态插入分组（比如虚拟滚动加载更多），这时要确保新插入的 .group-header 元素能被浏览器重新识别为 sticky 目标——实测发现，部分 Chrome 版本对 JS 动态插入后首次滚动存在延迟响应，加一句 el.style.transform = 'translateZ(0)' 强制重绘可缓解。
