position: fixed 在 iframe 中失效是因规范将其视口限定为 iframe 自身，而非顶层窗口；需改用 absolute + postmessage + requestanimationframe 动态定位，跨域时须严格校验 origin。
position: fixed 在 iframe 里失效，不是 CSS 写错了，而是浏览器规范决定的：它固定的是 iframe 自己的视口，不是顶层窗口。设父容器 height: 100vh 根本不能修复这个问题——反而可能掩盖真实原因，导致后续滚动逻辑错乱。
为什么 100vh 对 fixed 失效毫无作用
iframe 是独立文档，position: fixed 的“视口”就是 iframe 元素自身的可视区域（即 iframe.getClientRects() 返回的尺寸），和父页面 window.innerHeight 或 100vh 完全无关。给父容器设 height: 100vh 只是让 iframe 框看起来“满屏”，但内部 fixed 元素仍只相对于这个框定位，一旦父页面滚动，它就卡在 iframe 框里不动，视觉上像消失或错位。
常见错误现象：
- fixed 元素在 iframe 内静止不动，父页一滚动就“掉出视野”
- 用 Chrome DevTools 查看 computed position，top/left 值正确，但渲染位置明显偏移
- 在 iOS 微信或 Safari 中表现更糟，甚至完全不渲染
真正起作用的只有 JavaScript 协同定位
必须放弃“纯 CSS 修复”的幻想。核心思路是：把 iframe 内要“固定”的元素改为 position: absolute，再用 JS 实时计算它该出现在父页面视口中的绝对坐标。
关键实操点：
- 父页面监听
scroll和resize，通过postMessage发送{ type: 'SCROLL', scrollTop: window.scrollY, scrollLeft: window.scrollX } - iframe 内等
DOMContentLoaded后监听message，把收到的偏移存进变量，**不在 message 回调里直接改 style** - 用
requestAnimationFrame统一更新元素位置：element.style.top = (window.innerHeight - element.offsetHeight) + 'px'（底部固定）或element.style.top = scrollTop + offset + 'px'（顶部固定） - 务必设
element.style.position = 'absolute'且其父级为iframe.contentDocument.body，避免被其他 relative 祖先干扰
跨域 iframe 下你只能提前约定协作机制
如果 iframe 与父页不同源，window.parent 无法读取滚动值，postMessage 仍是唯一可行通道，但必须双方约定好 message schema 和 origin 校验逻辑。
容易踩的坑：
- 父页发消息时没校验
iframe.contentWindow是否存在，报Cannot postMessage to null - iframe 内未用
event.origin === 'https://expected-domain.com'校验来源，存在 XSS 风险 - 跨域时试图用
document.domain降域——现代浏览器已废弃此做法，无效 - 误以为可以靠
CORS或服务器代理解决——CORS 控制的是 HTTP 请求，不影响 DOM 通信
别碰 transform/scale/zoom 这些视觉欺骗手段
有人试过给 iframe 加 transform: translateY() 或父容器加 zoom 来“对齐”，这只会让坐标系彻底混乱。fixed 元素的计算会叠加多层变换矩阵，结果不可预测，尤其在高 DPR 屏幕或 iOS 上抖动严重。
真正要检查的是：
- 父页面 iframe 标签上有没有
style="transform: scale(...)"; - iframe 内部是否用了
rem或vw/vh且未适配window.devicePixelRatio - 移动端
<meta name="viewport">是否同时作用于父页和 iframe 内部（不应共享）
最常被忽略的一点：iframe 内容 document 必须完成加载才开始绑定 message 监听，否则 message 事件会丢失——别在 <script></script> 标签里直接写监听逻辑，包一层 document.addEventListener('DOMContentLoaded', ...)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
