用 position: fixed 实现底部悬浮条需设 bottom: 0、left: 0、right: 0 和足够 z-index；胶囊圆角需 height 与 border-radius 匹配；iPhone X+ 需用 env(safe-area-inset-bottom) 适配安全区。
用 position: fixed 实现底部固定悬浮条
底部悬浮条必须脱离文档流，position: fixed 是唯一可靠选择（sticky 在底部场景不生效）。关键不是“贴底”，而是要明确指定 bottom: 0，同时避免被其他元素遮挡——需设置足够高的 z-index（通常 z-index: 100 起步）。
常见错误是只写 bottom: 0 却忘了加 left: 0 和 right: 0，导致条形宽度仅由内容撑开，而非铺满全宽。
-
position: fixed会相对于视口定位，不受父容器影响 - 务必设
width: 100%或left: 0; right: 0确保横跨整个屏幕 - 移动端要注意：iOS Safari 中
fixed元素在键盘弹出时可能错位，需额外监听focus事件临时切为absolute
用 border-radius 做胶囊圆角效果
“胶囊款”本质是左右两端为半圆，高度与圆角值严格匹配。例如高 48px 的条，左右圆角必须设为 24px（即高度一半），否则会出现椭圆或截断。
不要用 border-radius: 50% —— 它依赖宽高比，而悬浮条宽度是 100%，会导致左右圆角过大甚至溢出。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
border-radius: 24px 24px 0 0（仅上边圆角）或24px（四角统一） - 若需“纯胶囊”（上下都圆），则必须让高度 = 圆角 × 2，且四角都设相同值，如
height: 40px; border-radius: 20px - 注意
overflow: hidden不是必需的，除非内部有溢出内容（比如长文本或图标偏移）
适配移动端和安全区（特别是 iPhone X+）
iPhone X 及更新机型底部有安全区域（home indicator），直接 bottom: 0 会让悬浮条被遮挡或压住指示器。必须用 env(safe-area-inset-bottom) 补偿。
但不能简单替换 bottom: 0，而是叠加：用 padding-bottom 或 margin-bottom 向上提，或改用 calc(0px + env(safe-area-inset-bottom)) 微调位置。
- 最稳妥写法：
padding-bottom: env(safe-area-inset-bottom)（配合box-sizing: border-box） - 若用
bottom调整，写成bottom: calc(env(safe-area-inset-bottom) * 1)，避免单位混用 - 旧版 iOS 不支持
env()，需加降级：bottom: 0; bottom: calc(env(safe-area-inset-bottom) * 1)
内联样式还是外链 CSS？要不要加 pointer-events？
悬浮条常带按钮或链接，但有时会被误点穿透（尤其页面有半透明遮罩时）。默认 pointer-events: auto 是对的，只有在需要“透传点击到底下内容”时才设 none —— 这种需求极少，别提前加。
样式建议外链，避免内联。但若只是单页小项目，用 <style> 块更清晰，不用单独建文件。
- 别用
!important强行覆盖，优先靠选择器权重解决冲突 - 文字居中用
display: flex; align-items: center; justify-content: center，比line-height更稳 - 如果条里放 SVG 图标，记得设
vertical-align: middle或包裹在flex容器里，否则基线对不齐
实际复杂点不在写法，而在不同机型上 env(safe-area-inset-bottom) 的取值不稳定，以及键盘唤起后 fixed 元素在部分 Android WebView 中会“卡住不动”。这些得靠运行时检测和重定位逻辑补救，纯 CSS 搞不定。
