position: fixed在iframe内定位参考系是iframe自身content area而非顶层窗口；父页滚动、transform或跨域限制均使其无法真正“钉”在主视口，必须用postmessage+absolute+requestanimationframe协同控制。
iframe内fixed元素的定位参考系不是视口而是iframe自身
这是最核心的原因。在标准浏览器行为中，position: fixed 的“视口”（viewport）指的是**包含该元素的文档所对应的初始包含块**——对 iframe 内的子页面来说，这个“视口”是 iframe 元素的 content area，而不是顶层窗口的可视区域。
也就是说，即使你在 iframe 子页面里写 top: 0; left: 0;，它会贴着 iframe 的左上角固定，而非整个浏览器窗口左上角。尤其当 iframe 被滚动、缩放、或设置了 transform（比如 scale(0.8)），偏差会更明显。
父页面 scroll 或 transform 会干扰 iframe 内 fixed 渲染
如果父页面对 iframe 元素本身做了以下操作，会直接破坏子页面 fixed 的定位逻辑：
- 父页面滚动时，iframe 位置变化但子页面 fixed 元素仍以 iframe 边界为锚点 —— 看起来像“跟着 iframe 滑动”
- 父页面给 iframe 设置了
transform: translateZ(0)或任何非none的transform，会强制创建新的 stacking context 和 containing block，使子页面 fixed 失去对顶层视口的绑定能力 - 父页面用
iframe { position: relative; top: 20px; }这类偏移也会让 fixed 元素“错位”20px
跨域 iframe 下无法从父页修补 fixed 行为
如果 iframe 是跨域的（例如 src="https://third-party.com/app.html"），父页面 JavaScript 无法访问其 document 或样式上下文，也就无法通过动态注入 CSS 或监听 scroll 来修正 fixed 表现。
此时唯一可行的规避路径只有：
- 让子页面改用
position: absolute+ 监听window.scrollY手动更新 top/left（需注意性能，建议节流） - 父页面将关键 UI（如顶部导航栏）抽出来，由父页统一渲染，iframe 只负责内容区，避免在子页内使用 fixed
- 若可控子页代码，且支持现代浏览器，可尝试
position: fixed; contain: paint;缓解重绘问题，但不解决参考系错误
移动端 Safari 对 iframe 内 fixed 的兼容性更差
iOS Safari（尤其是 iOS 15–16）存在已知 bug：当 iframe 在 overflow-scroll 容器中、或页面启用了 viewport-fit=cover 时，iframe 子页的 position: fixed 会完全失效或随机跳动。
这不是 CSS 规范问题，而是 WebKit 渲染层对嵌套视口的处理缺陷。实测中，哪怕只给父页面加一行 body { -webkit-overflow-scrolling: touch; }，都可能触发该异常。
真实项目中遇到这类问题，优先检查是否在 iOS 上复现；若必须保留 fixed，建议用 position: sticky 替代（需包裹在有高度限制的容器内），或彻底放弃子页 fixed，改由 postMessage 协同父页控制浮层位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
