fixed定位的参照物是视口。它脱离文档流，坐标系绑定浏览器可见区域，滚动时位置不变；getBoundingClientRect()返回值始终相对于视口，iOS和iframe中存在兼容性差异。
fixed 定位的参照物是视口，不是文档流
元素设置 position: fixed 后，它的定位基准不再是父容器或文档流中的位置，而是浏览器当前可见区域——也就是视口（viewport）。这意味着无论页面如何滚动、父元素如何变换，top/left 等偏移值始终相对于屏幕左上角（或右下等）计算。
滚动时“不动”的本质是脱离了文档流坐标系
普通 static 或 relative 元素的位置随文档滚动而移动，因为它们的坐标原点绑定在 HTML 文档的根坐标系里；而 fixed 元素被浏览器引擎从文档流中“抽离”，直接挂载到视口层（通常对应 compositor 的独立图层），其渲染坐标由视口尺寸和用户指定的 top/right/bottom/left 决定。
- 即使
body高度远超一屏，fixed元素也不会随它向下滚动 - 给
html或body加transform或perspective可能意外创建新的包含块，使fixed行为退化为相对该新容器定位（这是常见坑） - 在 iOS Safari 中，如果视口被缩放或触发了某些手势滚动优化，
fixed元素可能出现短暂跳动或错位
验证 fixed 是否真以视口为基准的简单方法
打开开发者工具，在控制台执行以下代码，观察输出是否始终接近屏幕左上角：
const el = document.querySelector('.my-fixed-el');
console.log(el.getBoundingClientRect());
getBoundingClientRect() 返回的坐标就是相对于视口的。滚动页面后再次执行，你会发现 top 和 left 值基本不变（忽略亚像素渲染差异），这直接印证了它锚定在视口上。
移动端和 iframe 中 fixed 的行为差异容易被忽略
在 iOS Safari（尤其旧版本）中，fixed 元素在软键盘弹出、地址栏收起/展开时可能失效，表现为“跟随滚动”；这是因为视口尺寸动态变化，但渲染层未及时同步。解决方案常需配合 viewport meta 设置或监听 resize 事件重设样式。
嵌套在 中的页面，其 fixed 元素只相对于该 iframe 的视口（即 iframe 元素本身的内容区），而不是顶层窗口——这点在微前端或广告嵌入场景中极易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
