sticky定位失效的主因是父容器创建新层叠上下文（如transform、opacity
sticky 定位失效的常见原因：父容器触发了新的层叠上下文或剪裁边界
不是只有 overflow: hidden 会破坏 position: sticky，任何能创建**新层叠上下文**（如 transform、opacity 、will-change）或**剪裁边界**（overflow: hidden|auto|scroll）的父级样式都可能导致 sticky 元素在滚动到一半时“突然松开”。
尤其容易被忽略的是：transform: translateZ(0) 或 transform: scale(1) 这类看似无害的操作，实际会强制创建层叠上下文，从而中断 sticky 的定位锚定链。
- 检查从 sticky 元素向上直到
的所有祖先元素，逐个移除transform、opacity、filter、will-change - 用浏览器开发者工具的“Computed”面板，查看 sticky 元素的
position是否仍为sticky（而非降级为static） - 临时给可疑父级加
overflow: visible !important测试是否恢复——若恢复，说明它就是剪裁源
sticky 的锚点依赖：必须有可滚动的最近块级祖先
position: sticky 不是相对于视口，而是相对于**最近的、具有滚动机制的块级祖先容器**。如果这个祖先本身不可滚动（比如高度未超限、或被 overflow: visible 覆盖），sticky 就永远无法触发“粘住”行为，看起来就像“滚动一半失效”。
- 确保 sticky 元素的直接或间接父容器设置了
overflow-y: auto|scroll，且其内容高度 > 容器高度 - 避免父容器设了
height: 100vh却没留出滚动空间——此时容器不滚动，sticky 就不会激活 - 不要把 sticky 元素放在
display: flex或display: grid的子项里却忘了给父容器设overflow；flex/grid 容器默认不产生滚动，需显式声明
浏览器兼容性与渲染时机问题
某些旧版 Chrome（≤90）、Safari（≤15.4）在页面动态插入 sticky 元素或频繁修改祖先 overflow 时，会出现 sticky 状态未及时更新的现象，表现为“一开始有效，滚几下后失效”。
立即学习“前端免费学习笔记（深入）”；
- 尝试在 DOM 插入后，用
getComputedStyle(el).position检查是否仍是sticky - 对动态添加的 sticky 元素，加一句
el.style.position = 'sticky'; el.offsetHeight;（强制重排）再设top - Safari 中若父容器用了
contain: layout或contain: paint，可能干扰 sticky 计算——临时移除测试
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
/* 避免意外触发层叠上下文 */
transform: none;
opacity: 1;
filter: none;
}真正卡住 sticky 的，往往不是某个单一属性，而是多个样式叠加后隐式创建了剪裁边界或层叠上下文。排查时别只盯着 overflow，要顺着 DOM 树一层层看 computed styles 里的 overflow 和 transform 实际值。
