底部固定悬浮条需配齐三件套（bottom:0、left:0、right:0）、显式高度（如height:56px）及body padding-bottom兜底；须兼容安全区、软键盘弹出及DOM结构规范。
直接用 position: fixed 就能做出底部固定悬浮条，但只写这一条 CSS 会遮内容、错位、在手机上失效——关键不是“怎么加”，而是“怎么配齐三件套+兜底 padding”。
必须写的 CSS 三件套：bottom + left + right（或 width）
只写 position: fixed 和 bottom: 0 不够。浏览器默认按内容宽度撑开，小屏缩放时可能右侧溢出或左侧留白。
-
bottom: 0锚定视口底边（不能用top或margin-top: auto） -
left: 0+right: 0比width: 100%更稳，兼容缩放和横屏 - 高度必须显式设为固定值（如
height: 56px），别用100vh或百分比，Safari 地址栏收放时会跳变 -
z-index: 999足够，设太高（如 99999）反而容易和弹窗冲突
body 必须加 padding-bottom 防遮挡
fixed 元素脱离文档流，不占空间。正文最后一行会被盖住，这不是 bug，是必然结果。
- 如果悬浮条高 56px，就在
body上加padding-bottom: 56px - 要兼容 iPhone 底部 Home Indicator，先加
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，再写padding-bottom: calc(56px + env(safe-area-inset-bottom)) - 低版本 Safari（15.4 之前）不支持
calc()混用env()，可降级写两行，后一条覆盖前一条
移动端键盘弹出时的典型失效场景
iOS Safari 软键盘弹出 → 视口高度突变 → fixed 元素被顶到半空，甚至盖住输入框。
立即学习“前端免费学习笔记（深入）”；
- 简单方案：监听
input或textarea的focus事件，临时隐藏悬浮条；blur后延时 300ms 再恢复（防焦点快速切换闪烁） - 避免在悬浮条里放
<input>或<textarea>，iOS 下定位极易失控 - 某些安卓 WebView 对父容器
transform或overflow: hidden敏感，确保悬浮条 DOM 是<body>的最后一个子节点
DOM 结构和 JS 绑定的两个硬性前提
结构不规范，后续所有交互（点击统计、关闭、高亮）都会不可靠。
- 按钮必须带唯一
id（如id="bottom-bar-cta"），不能只靠动态 class 或无意义 div 堆叠 - 脚本若在
</body>前执行，且悬浮条是静态 HTML，可直接用document.getElementById("bottom-bar-cta").addEventListener() - 若悬浮条由 JS 动态插入（懒加载、AB 测试 SDK），得用事件委托：
document.body.addEventListener("click", e => { if (e.target.id === "bottom-bar-cta") { /* 上报 */ } }) - 按钮必须加
type="button"，否则在<form>内会意外提交
真正卡住人的从来不是“怎么让条贴底”，而是它贴底后是否挡住文字、是否在键盘弹出时乱飘、是否被不同机型的安全区切掉一半——这些细节没对齐，用户第一眼就感知到“不专业”。
