position: fixed 更稳妥。它始终贴底、脱离文档流、不受父容器和滚动影响；而 position: sticky 对 bottom 支持差，尤其 ios safari 中软键盘弹起时易失效，且依赖父容器高度和可滚动条件，实际不可靠。
底部固定导航栏的定位方式选 position: fixed 还是 position: sticky？
position: fixed 是更稳妥的选择。它能真正脱离文档流、始终贴底，不受滚动或父容器影响；而 position: sticky 在 iOS Safari 中对 bottom 的支持长期不一致（尤其在有输入框弹起软键盘时容易失效），且必须配合 top 或 bottom + 父容器有高度限制才能触发，实际表现不可靠。
实操建议：
- 用
position: fixed+bottom: 0+left: 0+right: 0覆盖全宽 - 务必设置
z-index（建议 ≥ 100），避免被弹窗、广告等遮挡 - 若页面主体内容会滚动到导航栏下方，需给
<main></main>或内容容器加padding-bottom（值 ≥ 导航栏高度），否则最后一段文字会被遮住
如何适配 iPhone X 及后续带“安全区域”的机型？ iOS 设备底部有物理 Home Indicator 或手势条，原生 App 会自动留出安全边距。网页中若直接撑满到底，导航栏按钮可能被遮挡或误触。
关键做法是使用 env(safe-area-inset-bottom)：
- 给导航栏容器加
padding-bottom: env(safe-area-inset-bottom) - 同时设置
height或min-height固定主高度，防止 padding 拉伸后变形 - 注意：该 CSS 函数在旧版 Android 浏览器中不支持，但无害——会被忽略，此时仅靠常规
padding-bottom即可
.nav-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
padding-bottom: env(safe-area-inset-bottom);
z-index: 100;
}
点击区域小、按钮难按准？别只调 font-size
移动端手指操作精度有限，单纯放大文字不能解决热区问题。重点在 min-height、padding 和 touch-action。
常见错误是只写 height: 44px，但没留内边距，导致实际可点区域远小于视觉高度。
- 按钮内部至少设
padding: 12px 16px，保证热区 ≥ 44×44px（Apple 人机指南推荐最小点击尺寸） - 外层容器用
display: flex+align-items: center垂直居中，避免因行高错位 - 加
touch-action: manipulation，减少 iOS 上 300ms 点击延迟，并禁用双指缩放干扰
为什么导航栏在微信内置浏览器里突然“上浮”了？
微信 Android 版（尤其 v8.0.30+）在软键盘收起后，有时不会正确恢复视口高度，导致 fixed 元素位置计算异常，看起来像往上偏移。
这不是 CSS 问题，而是 WebView 视口状态残留。临时缓解方案：
- 监听
resize事件，在软键盘收起后强制重置body的scrollTop（哪怕为 0） - 更可靠的做法：在
input失去焦点时，用setTimeout延迟 100ms 执行window.scrollTo(0, window.scrollY)，触发视口重绘 - 避免在导航栏内放
input或textarea——这是最根本的规避方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
