根本原因是iframe自带独立层叠上下文且默认层级高于fixed元素；须同步设置iframe的position: relative与z-index: -1、菜单明确fixed及z-index、移除父容器创建新层叠上下文的属性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
iframe遮挡fixed底部菜单的根本原因
不是z-index没设够，而是iframe自带独立层叠上下文，且默认渲染层级高于页面内大多数fixed元素。即使给悬浮菜单加了z-index: 9999，只要iframe没显式降级，它就天然“盖”在上面。iOS Safari尤其明显，连transform: translateZ(0)都可能意外提升iframe的堆叠等级。
必须同时处理的三个层面
只调一个参数基本无效，得同步做三件事：
- 给
iframe加z-index: -1（注意：必须配合position: relative才生效） - 确保悬浮菜单父容器或自身有
position: fixed且z-index值明确（别用auto） - 移除iframe父容器上任何可能创建新层叠上下文的属性，比如
opacity、filter、will-change，甚至transform（除非你真需要）
最简可靠的CSS写法
直接套用这段，不用改名字：
.floating-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
iframe {
position: relative;
z-index: -1;
}
关键点：
-
z-index: -1必须和position: relative成对出现，否则无效 - 别给iframe加
background或border再不设z-index——透明背景+高默认层级=隐形遮挡 - 如果iframe是第三方嵌入（比如地图、视频），有些会强制重置
z-index，这时只能换方案：用pointer-events: none临时禁用iframe交互，菜单弹出时再恢复
安卓和iOS兼容性差异要盯死
iOS Safari对z-index更敏感，但安卓Chrome（尤其80+）会把iframe默认渲染在最高层，z-index: -1有时被忽略。这时候得加兜底：
- 给悬浮菜单加
backface-visibility: hidden，强制触发硬件加速，提升层级权重 - 如果菜单含按钮，安卓上建议监听
visualViewport变化，在键盘弹起时动态加margin-bottom避让，而不是只靠CSS - 别信“加
!important就行”——它解决不了层叠上下文隔离问题
z-index，也没法删它的transform，这时候就得接受一个现实——fixed底部菜单和第三方iframe共存，本质上就是个权衡。要么牺牲部分交互（比如菜单弹出时禁用iframe），要么换布局方式（比如用position: sticky配合足够高的父容器高度）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
