position:fixed 失效常因父元素设置 transform、perspective 或 filter，导致其定位参考从视口变为该父容器；修复可将元素提至无此类属性的祖先（如 body）或改用 position:sticky。
position:fixed 为什么没生效？检查父元素 transform
很多情况下 position:fixed 看起来“失效”——盒子没贴着视口，而是跟着某个区域滚动。根本原因常是：**父级元素设置了 transform、perspective 或 filter**。这些属性会创建新的层叠上下文（containing block），让 fixed 元素的定位参考对象从视口变成该父容器。
常见场景：body 下有个带 transform: translateZ(0) 的 wrapper，里面放导航栏并设 position:fixed —— 结果它只在 wrapper 内部“固定”，一滚动就消失。
- 临时排查：给疑似父元素加
outline: 1px solid red，看是否意外包裹了 fixed 元素 - 修复方法：把 fixed 元素提到没有
transform的祖先节点下（比如直接挂到body） - 若必须保留在原结构中，可改用
position:sticky+top:0替代（但行为不完全等价）
fixed 元素被遮挡或错位？z-index 和 stacking context 是关键
position:fixed 元素默认处于自己的层叠上下文中，它的 z-index 只和同级的 fixed/absolute 元素比，**不会自动压过有 z-index 的普通块级元素**。尤其当页面有 modal、header、侧边栏等多层覆盖时，容易出现“明明写了 z-index:999 却被盖住”的问题。
- 确认父容器是否意外创建了 stacking context（比如有 opacity
- 避免只写
z-index: 999，建议配合position:relative显式声明层级起点 - 移动端 Safari 对
z-index在 fixed 元素上的解析更敏感，测试务必真机验证
滚动时 fixed 元素抖动或闪烁？别忽略 will-change 和 backface-visibility
部分浏览器（尤其是 Chrome 和旧版 Safari）在 fixed 元素参与合成层切换时，会出现 1px 抖动、文字模糊或闪屏。这不是 bug，而是渲染管线对 fixed 定位的优化策略冲突导致的。
- 简单缓解：给 fixed 元素加
will-change: transform，提前提示浏览器提升为独立图层 - 更稳妥方案：加
backface-visibility: hidden+transform: translateZ(0)，强制硬件加速且稳定定位基准 - 注意副作用：过多使用
will-change会增加内存占用，只加在真正需要的元素上
响应式 fixed 布局怎么适配不同屏幕？慎用 top/left 百分比值
用 top: 10% 或 left: 5% 做 fixed 定位，在横竖屏切换或缩放时极易错位。因为百分比是相对于视口宽高的，而用户手势缩放、地址栏显隐都会动态改变可用视口尺寸。
- 优先用固定单位：
top: 24px、right: 16px，配合媒体查询微调 - 需要“居中”效果时，用
left: 50%+transform: translateX(-50%)，比margin-left: -width/2更可靠 - 避开 viewport 高度陷阱：不要依赖
vh单位做垂直定位（iOS Safari 地址栏收放会导致100vh不等于真实可视高度）
fixed 定位看着简单，实际卡点全在渲染层细节里——transform 创建新 containing block、z-index 的作用域边界、浏览器对合成层的调度策略，这些都不是写个样式就能自动对齐的。动手前先打开 DevTools 的 Layers 面板看看图层划分，比反复调 margin 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
