fixed定位需设top:0、left:0才能全屏覆盖，因其默认“原地冻结”而非锚定视口左上角；还需width/height:100%、right/bottom:0防缩放与iframe问题，并注意viewport、滚动条宽度及z-index层级陷阱。

fixed定位为什么必须配合top/left=0才能全屏覆盖

因为position: fixed本身只表示脱离文档流并相对于视口定位，但默认位置不是(0,0)——它会保留在原本的文档位置（即“原地冻结”），导致菜单可能偏移、留白甚至被遮挡。只有显式设top: 0、left: 0，才真正锚定到视口左上角。

常见错误现象：
— 菜单只覆盖了页面中部一块区域
— 滚动时菜单跟着动（其实是position: absolute误用）
— 手机上右侧出现横向滚动条（没处理right/bottom）

• 必须同时设置top: 0、left: 0、width: 100%、height: 100%
• 为防极端缩放或iframe嵌入，建议补上right: 0和bottom: 0（冗余但稳妥）
• 如果菜单有滚动内容，overflow-y: auto比scroll更合理——避免 Safari 上强制显示空滚动条

100%宽高在移动端失效的三个真实原因

不是写错了，是 viewport、缩放、滚动条这些“看不见的变量”在捣鬼。最典型的是 iOS Safari：它把地址栏高度算进视口，但100vh又不包含地址栏，导致菜单顶部被遮住或底部露白。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 别直接用height: 100vh——改用height: 100% + 父级html, body { height: 100% }
• 加viewport meta 标签：<meta name="viewport" content="width=device-width, initial-scale=1">，否则安卓某些浏览器会忽略100%
• 滚动条宽度会影响100%计算（尤其 Windows Chrome），可用width: 100vw替代width: 100%，更贴近视口物理宽度

fixed菜单遮不住其他元素？z-index不是越大越好

z-index只对定位元素（position非static）生效，且层级比较发生在同一 stacking context 内。设z-index: 9999却仍被盖住，大概率是父容器创建了新的 stacking context，把你的菜单“锁”在了局部层级里。

• 检查菜单父级是否用了opacity、transform、filter等触发新 stacking context 的属性
• 菜单自身要确保position: fixed + z-index，不要依赖父级继承
• 通用安全值：用z-index: 1000起步，避开 Bootstrap（1050）、Ant Design（1000）等主流 UI 库的默认范围
• 调试技巧：在 DevTools 里选中菜单，看 Computed 面板里的z-index是否生效，以及stacking context路径

键盘焦点与可访问性：fixed菜单不能只靠视觉

全屏覆盖菜单一旦展开，键盘 Tab 仍能跳到背后的内容，屏幕阅读器可能完全忽略菜单结构——这不是“功能正常”，是残障用户根本用不了。

• 菜单激活时，给加aria-hidden="true"，菜单容器加aria-modal="true"
• 用 JavaScript 拦截Tab键，限制焦点只在菜单内循环（监听keydown判断Tab + shiftKey）
• 首次聚焦自动落到菜单第一个可交互元素（如首项<a></a>或<button></button>），避免用户按几十次 Tab
• ESC 关闭菜单后，焦点必须回到触发按钮（用focus()还原），否则键盘用户会迷失

实际做下来，最难的不是让菜单铺满屏幕，而是让它在各种缩放、横竖屏切换、读屏模式下都不“掉链子”。尤其是 iOS 上那个若隐若现的地址栏高度问题，调一次 viewport 不等于一劳永逸，得真机反复切几次再确认。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！