移动端固定导航栏需规避iOS Safari抖动、软键盘错位、触摸穿透及可访问性问题：须设viewport元标签、禁用transform等触发层叠上下文的属性、用scroll-margin-top解决锚点遮挡、checkbox+aria实现无障碍菜单。
移动端固定导航栏不是加个 position: fixed 就完事——iOS Safari 的抖动、软键盘弹出后错位、触摸穿透、可访问性断裂，都是高频翻车点。
为什么 position: fixed 在 iOS 上会抖动或失效
iOS 15+ 中，position: fixed 元素在页面滚动时可能因视口缩放、软键盘唤起或 transform 干扰而偏移甚至“跳帧”。这不是 bug，是 Safari 对 fixed 定位的渲染策略限制。
- 必须声明
，缺这个，fixed 直接退化为 relative - 父级容器不能有
transform、overflow: hidden或will-change，否则创建新层叠上下文，fixed 层级被压底 - 避免对
直接设height，改用min-height+padding组合，适配不同字体渲染和缩放 - 软键盘弹出时，iOS 会临时重设视口高度，导致 fixed 元素“上浮”——此时需监听
resize事件，用document.body.style.height = '100vh'强制重置（仅限必要场景）
z-index 和遮挡问题怎么解
移动端 fixed 导航栏被轮播图、弹窗、视频控件盖住，90% 是 z-index 分层混乱或父容器触发了新 stacking context。
- 导航栏自身设
z-index: 1000不够，要确保其父级（如）没有transform或opacity ，否则层级重置 - 所有可能覆盖导航的组件（比如
、控件层），都得显式设z-index: 1001及以上 - 不要依赖 “祖先 z-index 高，后代就一定高”——CSS 层叠上下文是隔离的，子元素的
z-index只在本 context 内生效 - 用浏览器 devtools 的 “Layers” 面板检查是否意外触发了多个 stacking context
移动端收起/展开菜单的可访问性陷阱
只靠 display: none 切换汉堡菜单，会导致屏幕阅读器跳过、键盘焦点丢失、aria-expanded 不同步——这不是“能用”，是“残障用户不可用”。
- 用
input[type="checkbox"] + label + ul结构实现纯 CSS 下拉，比 JS 切换更可靠，且天然支持:checked状态 - 必须给 toggle 按钮加
aria-expanded="false"，并随状态切换更新该属性值 - 菜单展开后，用
focus()主动把键盘焦点移到第一个，收起时再移回 toggle 按钮 - 别用
visibility: hidden或opacity: 0隐藏菜单——它们仍会被屏幕阅读器读取
锚点跳转被导航栏遮挡怎么办
点击页内链接（如 #section2）后，标题被 fixed 导航栏盖住，是移动端最常被忽略的细节。
- 全局加一句
h1, h2, h3 { scroll-margin-top: 60px; }（60px 替换为你的导航实际高度） - 不要用 JS 去监听
hashchange再scrollBy——兼容性差、易冲突、破坏原生平滑滚动 - 如果导航高度响应式变化（比如小屏下变高），改用 CSS 自定义属性：
:root { --nav-height: 60px; }，然后h2 { scroll-margin-top: var(--nav-height); } -
scroll-margin-top是原生支持，Chrome 89+、Safari 15.4+、Firefox 97+ 均可用，无需 polyfill
真正难的不是让导航“看起来固定”，而是让它在各种软键盘、缩放、语音控制、暗色模式、DPI 变化下依然稳定、可触达、不遮挡。这些细节不写进样式表，只靠“测试一下”是发现不了的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
