需用JavaScript模拟fixed：父页面通过postMessage发送滚动值，iframe内用requestAnimationFrame将元素设为absolute并动态计算top=视口距顶距离−父scrollTop。
fixed元素在iframe里不随父页面滚动，但实际需要“钉”在父页面视口
这是典型跨上下文定位失效：iframe内position: fixed只相对于自身文档视口生效，而父页面滚动时，iframe内容滚动，但fixed元素仍“粘”在iframe自己的小窗口里，看起来像错位或消失。
根本原因不是CSS写错了，而是浏览器规范强制隔离了iframe的视口坐标系。想让元素视觉上“固定在父页面”，必须放弃纯CSS方案，改用JavaScript协同控制位置。
- 别试图用
transform或top/left硬调——iframe高度动态时极易偏移 - 避免监听
scroll事件直接改style.top——父页面滚动抖动会导致fixed元素跳变 - 如果iframe跨域，
window.parent访问会被拒绝，此时无法读取父页面滚动偏移，纯前端无解
父页面主动发滚动状态，iframe内用requestAnimationFrame平滑同步
推荐通信方式是父页面监听自身scroll，通过postMessage把scrollTop和scrollLeft发给iframe；iframe收到后，用requestAnimationFrame更新fixed元素的top和left（转为position: absolute模拟fixed）。
关键点在于“模拟”：把原本fixed的元素改成absolute，并设parent为iframe的body，再用JS实时修正它的top值 = 目标距视口顶部距离 - 父页面scrollTop。
立即学习“前端免费学习笔记（深入）”；
- 父页面发送示例：
window.frames[0].postMessage({ type: 'SCROLL', scrollTop: window.scrollY }, '*') - iframe内接收后，不要立刻
element.style.top = ...，先存入变量，再在requestAnimationFrame回调里统一更新 - 注意iframe内
document.body可能未加载完成，需等DOMContentLoaded后再绑定message监听
iframe跨域时，只能靠父页面注入CSS变量或预留容器
如果iframe与父页面不同源，postMessage仍可用（需校验event.origin），但父页面无法直接读取iframe内部DOM，也无法从外部注入样式。此时必须提前约定协作机制。
常见可行做法是：父页面在插入iframe前，先在HTML中预留一个同尺寸的空div占位，把本该在iframe内fixed的UI（比如悬浮按钮）直接放在父页面这个容器里，并用CSS控制它始终覆盖在iframe上方；iframe内部则隐藏对应UI。
- 父页面容器需加
pointer-events: none，否则会拦截iframe点击 - iframe内通过
postMessage通知父页面“我已就绪”，父页面再把容器pointer-events: auto打开（如需交互） - 避免用
z-index硬叠——移动端iOS Safari对iframe+高z-index组合有渲染bug，表现为闪烁或遮挡失效
移动端Safari下fixed在iframe中完全失效的临时对策
iOS 15+ 的Safari对iframe内position: fixed有额外限制：当iframe被transform、overflow: hidden或contain: layout包裹时，fixed元素可能直接不渲染。这不是bug，是主动限制。
验证方法：打开Safari开发者工具，选中该元素，看Computed面板里position是否显示为static（已被降级）。此时即使JS同步位置，也白搭。
- 父页面中iframe的外层容器不能加
transform: translateZ(0)或will-change: transform - iframe标签本身不能设
style="overflow: hidden"，哪怕只是临时调试加的 - 最稳方案仍是放弃iframe内fixed，把关键UI提到父页面，用
iframe.getBoundingClientRect()算出位置后绝对定位
跨iframe做fixed，本质是在对抗浏览器安全模型和渲染管线。能不用就不用，真要用，就得接受JS介入、通信延迟、移动端兼容性打折这些代价。
