position: fixed 是唯一真正“固定在视口底部”的方式；它脱离文档流、以视口为基准定位，需同时设置 bottom: 0、left: 0、right: 0，并配合 body 的 padding-bottom 避让内容，否则会遮挡正文。
position: fixed 是唯一真正“固定在视口底部”的方式
如果你要的是一个始终贴着屏幕最下方、滚动不消失的悬浮条（比如移动端底部导航、快捷操作按钮），position: fixed 是目前唯一跨浏览器稳定生效的方案。它不依赖父容器，也不受内容高度影响。
常见错误是只写 bottom: 0 却漏掉 left: 0 和 right: 0 —— 这会导致元素宽度收缩为内容宽，左右留白；或者忘记给 body 加 padding-bottom，结果正文最后一段被遮住。
-
position: fixed; bottom: 0; left: 0; right: 0;必须三者齐备，否则定位不可靠 -
body的padding-bottom值必须等于悬浮条的height（建议用固定像素，如56px），不能用100vh或百分比，否则 Safari 地址栏收放时会跳变 - 避免在该悬浮条内部放
<input>或<textarea></textarea>—— iOS Safari 键盘弹出后，fixed 元素容易卡在错误位置 -
z-index: 999足够，别堆到99999，否则和模态框层级冲突
flexbox 实现的是“沉底”，不是“固定”
很多人误以为 flexbox 的 flex: 1 也能做固定底部，其实它只是让页脚“随内容自然到底”，属于语义正确的粘性布局（sticky footer），和悬浮条完全不是一回事。它适用于 footer 这类语义化页脚，而非需要始终可见的操作栏。
典型配置是：html 和 body 设 min-height: 100vh（不是 height: 100vh），body 设 display: flex; flex-direction: column，main 设 flex: 1，footer 不设任何定位属性。
立即学习“前端免费学习笔记（深入）”；
- 如果用了
height: 100vh，短页面下flex: 1没空间可分，页脚就会上浮 -
margin-top: auto在 IE11 下有兼容问题，不推荐替代flex: 1 - 这个方案里，页脚永远在内容尾部，不会“悬浮”——内容不够一屏时才出现在视口底，内容足够长时就在文档流末端
absolute + bottom: 0 在局部容器里大概率失效
想把按钮钉在某个卡片（.card）底部？直接套 position: absolute; bottom: 0 很危险。它看似简单，但实际依赖父容器正确设置 position: relative，且会破坏父容器高度计算。
更常见的问题是：父容器没设 position: relative，absolute 元素就往上找，可能跑到 html 根节点去；小屏下卡片高度塌陷，按钮悬空；响应式断点切换后按钮位置偏移，还得手动调 top/bottom 值。
- 父容器必须显式声明
position: relative，否则absolute定位基准错乱 - 卡片内推荐用
display: flex; flex-direction: column; justify-content: space-between，按钮放在最后子元素，不脱离文档流，适配性强 - 绝对定位不适合多列 → 单列响应式场景，堆叠后按钮常卡在上半部分内容末尾，而非视觉底部
Grid 布局适合整页结构，但对悬浮条意义不大
用 grid-template-rows: auto 1fr auto 确实能划分头-主-尾三行，footer 自然落到底部轨道。但它本质仍是文档流内的“沉底”，不是视口级固定；而且一旦你要让悬浮条覆盖内容（比如半透明导航），Grid 就无能为力了。
Grid 的优势在于整页结构控制，比如需要精确控制 header 高度、main 内容撑满、footer 固定高且居中对齐。但它无法解决“始终悬浮+不遮正文”的核心矛盾——这必须靠 fixed + padding-bottom 组合。
- 如果悬浮条需要半透明、带阴影或动态缩放图片，
fixed是唯一能保证层叠顺序和定位稳定的方案 - Grid 适合静态页脚，不适合交互频繁的操作栏；用它做悬浮条反而增加复杂度，还掩盖了真正的问题（遮挡、键盘弹起错位）
- 真正容易被忽略的点是：iOS 键盘弹出时，
fixed元素行为不可预测，必须测试真机，不能只看桌面模拟器
