底部固定悬浮条分两类：语义化页脚应使用flex布局自然沉底，悬浮操作栏则需position: fixed配合bottom/left/right: 0、固定height及safe-area-inset-bottom适配，且须挂载于body下避免transform干扰。
底部固定悬浮条不是“设个 position: fixed 就完事”，它分两类：一类是语义化的页脚（footer），随内容自然沉底；另一类是真正脱离文档流、始终锚定视口底部的操作栏（如导航、按钮）。混用方案会导致遮挡、跳变、iOS 键盘弹出后错位，甚至在 iPhone X+ 上被 Home Indicator 裁切。
用 position: fixed 做悬浮操作栏必须写全三件套
只写 bottom: 0 是最常见的失效原因。浏览器对视口高度的动态重算（比如 Safari 地址栏收放、键盘弹起）会让单靠 bottom: 0 的元素飘移或缩窄。
-
position: fixed必须搭配bottom: 0、left: 0、right: 0—— 缺一不可 -
height必须是固定值（如56px），禁用100vh、100%或clamp()，否则 Safari 视口高度突变时会抽搐 - 给
body加padding-bottom: 56px（至少等于操作栏高度），否则正文最后一段会被遮住 - 避免在该元素内部放
<input>或<textarea>，iOS 键盘弹出易触发布局重排
iPhone X+ 安全区适配不能靠 JS 判断
单纯 bottom: 0 在刘海屏上会让内容压在 Home Indicator 下面，用户点不到最底下一排图标。这不是 bug，是系统行为，必须显式处理。
- 在操作栏容器上加
padding-bottom: env(safe-area-inset-bottom) - 必须配合
<meta name="viewport" content="viewport-fit=cover">，否则env()不生效 - 别用
calc(56px + env(safe-area-inset-bottom))覆盖height—— 高度仍要保持固定，padding是额外留白 - 若操作栏含文字按钮，建议用
text-align: center+display: flex+flex: 1布局，避免因padding-bottom导致文字视觉偏上
别把 fixed 元素塞进带 transform 的父容器里
只要任意祖先节点含有 transform、perspective、filter 或 will-change，position: fixed 就会退化为相对该父元素定位，而不是视口。这是规范定义，不是兼容性问题。
立即学习“前端免费学习笔记（深入）”；
- 常见踩坑场景：全局 rem 缩放方案中对
html设置了transform: scale(1)，或动画库自动注入了transform类名 - 检查工具栏 DOM 路径上所有祖先节点的 computed style，重点看是否有上述属性
- 唯一可靠解法：把操作栏直接挂到
body下，不嵌套任何带变换的容器
页脚（footer）沉底请用 flex: 1，不是 fixed
如果你要的是语义化页脚——内容少时贴底、内容多时随内容流到底部——那就该用 flex 布局“挤”出来，而不是用 fixed 硬钉。后者会遮内容、破坏可访问性、且在小屏下极易错位。
-
body设display: flex; flex-direction: column; min-height: 100vh -
main（或主体容器）设flex: 1，它会吃掉所有剩余空间 -
footer不设定位、不设margin-top: auto，保持流内自然尺寸 -
header和footer加flex-shrink: 0防止被压缩 - 这个方案在 iOS Safari 14.5+、Android Chrome、Edge 全系 100% 可靠，且无 JS 开销
真正难的不是写几行 CSS，而是分清你要的到底是“沉底页脚”还是“悬浮操作栏”——前者属于文档流的一部分，后者必须脱离文档流并应对各种运行时视口变化。选错方案，后面所有调试都是在补洞。
