iframe 中 position: fixed 元素严格固定于 iframe 自身视口，父页面滚动时看似错位；纯 CSS 无效，必须用 postMessage + requestAnimationFrame 协同同步滚动与视口状态，跨域需 origin 白名单校验与容错解析。
iframe 里的 position: fixed 元素不是“错位”，而是严格按规范固定在 iframe 自身视口上——父页面一滚动，它就卡在 iframe 框里不动，看起来像消失或偏移。纯 CSS 无解，必须用 JavaScript 协同模拟。
为什么 top/right/bottom/left + 100vh 都不管用
给 iframe 父容器设 height: 100vh 只会让 iframe 框变高，但内部 fixed 元素的定位基准仍是 iframe 的 contentDocument 视口，和父页面滚动完全无关。DevTools 里看 getBoundingClientRect().top，你会发现它始终以 iframe 边框为原点，而不是浏览器窗口顶部。
- 试图用
transform、zoom或overflow: hidden“压”位置，只会掩盖坐标系隔离问题，后续 resize 或 iOS 键盘弹出时更难调试 -
100vh在横屏、地址栏收起、软键盘弹出时会突变，但fixed不响应这些变化，导致底部按钮直接沉进系统导航栏 - 同源和跨域行为一致，和
sandbox属性无关——这是浏览器沙箱强制规范，不是 bug
postMessage + requestAnimationFrame 是唯一可控路径
父页面主动发滚动与视口状态，iframe 内用 requestAnimationFrame 动态更新 position: absolute 元素的位置。关键不在“通没通信”，而在“怎么同步才不跳变”。
- 父页面监听
scroll和resize，用requestAnimationFrame节流发送，结构必须含scrollTop、scrollLeft、innerHeight、innerWidth——仅scrollTop支撑不了底部固定 - iframe 内收到
message后，只存变量，不在回调里直接改element.style.top；等下一帧用requestAnimationFrame统一计算并更新 - 元素的 containing block 必须是
document.body，且 body 不能有position: relative等干扰样式，否则top值会相对 body 计算而非视口
跨域 iframe 下的 fallback 方案
如果 iframe 与父页面不同源，postMessage 仍可用，但校验和协作机制必须提前约定，否则通信会静默失败。
立即学习“前端免费学习笔记（深入）”；
-
event.origin校验不能只写if (e.origin === 'https://parent.com')：需兼容 http/https 混合部署，建议用白名单数组['https://a.com', 'https://b.com']比对 -
e.data必须JSON.parse()并try-catch，IE11 需垫片；解析失败会导致消息中断，且无报错提示 - 更稳妥的方案是父页面预留占位容器：在插入 iframe 前，先在父页面 DOM 中放一个同尺寸
<div>，把悬浮按钮等 UI 直接放上去，加pointer-events: none避免拦截点击；iframe 内通过postMessage通知“已就绪”，父页面再开pointer-events: auto
真正难的不是让元素“动起来”，而是在 iOS 键盘弹出、Android 导航栏切换、Chrome 地址栏折叠等视口突变场景下，依然能实时重算位置——这要求每次 resize 后都触发完整坐标更新，且不能依赖 window.innerHeight 这类可能滞后的值。
