fixed 元素不随页面滚动是正常行为，若异常滚动，通常因父容器触发了新的定位上下文（如 transform、opacity、filter 等），使其参考系从视口变为父容器。
fixed 元素不随页面滚动？它本来就不该动
如果你发现加了 position: fixed 的元素“没固定住”、反而跟着滚，大概率是父容器触发了新的层叠上下文或定位上下文，比如设置了 transform、opacity、will-change 或 filter。这些属性会让 fixed 元素的参考系从视口变成该父容器，行为退化为类似 absolute。
常见诱因包括：
- 父级
div有transform: translateZ(0)（常用于开启硬件加速） - 导航栏用了
opacity: 0.99做抗锯齿 - 外层包裹了
filter: blur(1px)
验证方式：在 DevTools 中临时删掉父级的这些 CSS 属性，看 fixed 是否恢复贴视口行为。
absolute 元素意外“悬浮”或位置错乱？检查最近的定位祖先
position: absolute 的定位基准不是视口，而是**最近的非 static 定位祖先元素**。如果找不到这样的祖先，就会回退到初始包含块（通常是 <html>），但受 direction、writing-mode 和根字体影响，实际偏移可能和预期不符。
立即学习“前端免费学习笔记（深入）”；
排查步骤：
- 用 DevTools 逐层向上看父元素的
position值，确认哪一层是第一个relative/absolute/fixed - 若所有父级都是
position: static（默认值），那它就相对于<html>定位——此时top: 20px是距页面顶部 20px，而非距视口顶部 - 注意：
position: sticky不构成定位上下文，不会影响absolute的参照
滚动时 fixed 元素抖动或闪烁？优先排查 transform 和 will-change
即使没有显式写 transform，某些框架（如 Vue 的 v-show 切换、React 的动画库）或 CSS-in-JS 库可能注入 transform: translateZ(0) 来强制 GPU 加速。这会悄悄改变 fixed 的定位根节点。
更隐蔽的问题是 will-change: transform —— 它本身不触发重排，但会提前创建独立图层，间接导致 fixed 失效。
解决方案：
- 对
fixed元素自身添加transform: translateZ(0)（可强制其脱离父层叠上下文） - 或改用
contain: layout paint替代will-change，副作用更可控 - 避免在
body或html上设置transform/filter
需要“半固定”效果？sticky 比 hack fixed 更可靠
想实现“滚动到某位置才固定，再滚动到某位置就解除”，别用 JS 监听 scroll + 切换 fixed 和 static，性能差且易出竞态。直接用 position: sticky：
header {
position: sticky;
top: 0;
z-index: 100;
}
它的行为由浏览器原生控制，支持平滑滚动、兼容性已覆盖 Chrome 56+、Firefox 59+、Safari 15.4+。注意两点：
-
sticky必须有明确的top/bottom/left/right值才生效 - 它只在父容器内生效；若父容器高度不足或设置了
overflow: hidden，可能被截断
真正难处理的，是既要响应滚动又要避开第三方库注入的隐式定位上下文——这时候得翻源码或加 !important 覆盖，而不是调 top 值。
