Safari底部按钮被遮挡主因是fixed锚定视觉视口且未响应地址栏/工具栏动态变化，需结合env(safe-area-inset-bottom)、100dvh、position:sticky及visualViewport监听综合解决。
固定底部按钮在 Safari 滚动时被遮挡，不是因为 z-index 不够或 bottom: 0 写错了，而是 Safari 把 position: fixed 锚定在「视觉视口（visual viewport）」底部，而滚动时地址栏/工具栏会动态收放，导致 visual viewport 高度变化，fixed 元素却没重算位置——它卡在了旧高度的底部，于是被小横条（Home Indicator）或地址栏盖住。
用 env(safe-area-inset-bottom) 补齐底部安全区（iOS Safari 必做）
iPhone X 及之后的全面屏设备有底部安全区，Safari 通过 env(safe-area-inset-bottom) 暴露这个偏移量（通常 34px 或 54px），必须主动适配：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在，否则该变量为 0 - 底部按钮本身不加
padding-bottom，而是给它的父容器（如#app或main）设：padding-bottom: env(safe-area-inset-bottom, 0px) - 不要只写
padding-bottom: 34px—— 不同机型、横竖屏、是否开启放大字体，值都不同 - 如果按钮是
position: fixed，它仍需bottom: env(safe-area-inset-bottom, 0px)，但仅限 iOS；安卓不支持，不能当通用解
避免用 100svh 替代 100vh 来“撑高”容器
100svh 只响应软键盘，不响应 Safari 地址栏或 Home Indicator 的显隐——它对滑动遮挡问题完全无效：
-
height: 100svh在用户上滑收起地址栏后，仍维持原高度，造成底部留白；下拉展开时又突然被遮，体验更差 - 真正该用的是
100dvh：它随地址栏/工具栏实时更新，iOS 16.4+ 和 Chrome 100+ 原生支持 - 若需兼容老 Safari，可 fallback 到
min-height: 100vh+ JS 读取visualViewport.height动态修正
改用 position: sticky 替代 fixed（推荐首选）
对于底部导航栏、提交按钮这类本就位于 DOM 流末端的元素，sticky 是副作用最少的替代方案：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
min-height: 100vh（不能只写height: 100%），且不能有transform或overflow: hidden，否则 sticky 失效 - 按钮自身写：
position: sticky; bottom: 0;，它不脱离文档流，不受 visual viewport 压缩影响 - iOS 15.4+、Chrome 90+ 均支持；老版本可降级为
position: absolute+bottom: 0，配合visualViewport监听 - 比
fixed少一个关键坑：它不会在页面内容不足时“掉出屏幕外”，也不会因地址栏收放错位
监听 visualViewport 动态修正（兜底必须）
仅靠 CSS 无法覆盖所有场景（比如微信 WebView、老版 Safari、混合弹窗），JS 监听仍是必要兜底：
- 存基准值：
const baseHeight = visualViewport.height; - 监听变化：
visualViewport.addEventListener('resize', () => { const delta = baseHeight - visualViewport.height; }) - 用
transform: translateY(${delta}px)移动按钮，比改bottom更少触发重排 - 不支持
visualViewport的环境（如 iOS 15.3），fallback 到focusin/blur+setTimeout(() => {}, 0)读取input.getBoundingClientRect().bottom
最易被忽略的一点：这些方案不是单选题。iOS 上要同时处理 safe-area-inset-bottom（地址栏/小横条）、keyboard-inset-bottom（键盘）、visualViewport.height（动态视口）三层偏移，缺一不可；安卓则几乎全靠 JS fallback，别信“一套 CSS 通吃”的说法。
