底部菜单悬浮条需同时满足固定定位与内容可见：用 position: fixed + bottom: 0 定位，同时 body 必须设置等于菜单高度的 padding-bottom（如 56px），避免遮挡内容；ios 键盘弹出时 fixed 元素易错位，推荐改用 absolute + flex 布局方案。
底部菜单悬浮条要“固定在最底层上方”，本质是两个需求混在一起：既要它始终贴着视口底边（position: fixed），又不能盖住真正的页面底部内容（比如页脚或表单提交区）。很多人直接写 bottom: 0，结果发现内容被遮、滚动到底部时最后一行看不见——问题不在定位本身，而在正文区域没留出足够空间。
为什么 bottom: 0 的菜单会盖住内容
因为 position: fixed 让元素脱离文档流，浏览器不会自动为它腾位置。你看到的“最底层”其实是视口底部，不是页面 DOM 的末尾。如果正文高度不足一屏，菜单就会悬在空白处；如果正文很长，菜单又会压住最后一段文字。
-
bottom: 0只管定位，不管内容是否可读 - 没有
padding-bottom或margin-bottom补位，正文末尾必然被截断 - iOS Safari 键盘弹出时，
fixed元素可能错位，尤其当高度用百分比或vh定义时
必须加的 body padding-bottom 值怎么算
这个值必须等于悬浮菜单的实际高度，且建议用固定像素（如 56px），别用 100vh 或 clamp()——后者在 Safari 地址栏收放时会跳变，前者在缩放或字体放大时不稳定。
- 菜单高度写死：比如
.menu { height: 56px; }→ body 就加padding-bottom: 56px - 菜单高度响应式（如用
rem）：需 JS 监听resize并动态更新document.body.style.paddingBottom - 千万别只给 main 加
margin-bottom：滚动时它不生效，只有 padding 才能撑开整个 viewport 高度
移动端 input 被菜单挡住怎么办
这是 iOS Safari 的经典 bug：软键盘弹出后，fixed 元素不跟随视口上移，反而卡在原位，导致 input 被盖住、光标不可见。
- 临时方案：监听
focus事件，给菜单加transform: translateY(200px)或设display: none - 更稳做法：改用
position: absolute+ flex 布局包裹，把菜单放在一个height: 100vh的容器里，靠父级overflow: hidden控制可见性 - 绝对不要在悬浮菜单内部放
<input>或<textarea></textarea>——它们和 fixed 的兼容性极差
z-index 和阴影这些细节容易被忽略
z-index: 999 够用，别堆到 99999；阴影用 box-shadow: 0 -2px 10px rgba(0,0,0,0.1) 比纯边框更自然。但真正关键的是：如果页面用了 transform、filter 或 will-change，会创建新的层叠上下文，导致 z-index 失效——这时得把菜单提到跟 body 同级，而不是嵌在某个 div 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
