用position: fixed实现底部悬浮条需设left: 0; right: 0; height: 56px; z-index: 1000+; 放body末尾，加safe-area-inset-bottom适配并预留右滑返回空间。
用 position: fixed 实现底部悬浮条，但别直接套默认值
直接写 position: fixed; bottom: 0; 看似合理，实际常被遮挡或压住页脚内容。关键不是“固定”，而是“固定在视口底部且不干扰其他元素”。z-index 至少设为 1000 以上，否则可能被轮播图、弹窗等覆盖；同时必须加 left: 0; right: 0; 撑满全宽，不然只在左下角出一小条。
常见错误现象：
– 切换页面后悬浮条突然消失（没加 body 高度撑开或 JS 动态移除了 class）
– 在 iOS Safari 中上滑时条跟着滚动（缺少 -webkit-overflow-scrolling: touch; 或父容器触发了 scroll bounce）
- 推荐结构：用独立
<div id="consult-bar">放在<body>最末尾，不嵌套在<footer>内 - 必须设置
height（如56px）和box-sizing: border-box，避免内边距撑高后溢出 - 如果页面有底部安全区（iPhone X+），加
padding-bottom: env(safe-area-inset-bottom);到条内部容器，而不是整个条
点击区域小、按钮点不中？检查 pointer-events 和层级穿透
悬浮条里放了 <a> 或 <button> 却点不动，大概率是上层 DOM 拦截了事件——比如某个全屏遮罩未关闭、或者 fixed 元素的父容器设置了 transform（会创建新层叠上下文，导致 z-index 失效）。
- 用浏览器开发者工具检查：选中按钮 → 查看 “Computed” 面板里的
pointer-events是否为auto；若为none，往上追溯是谁设的 - 避免对悬浮条容器设
transform: translateZ(0)或will-change: transform，除非真需要硬件加速，否则易引发 iOS 点击延迟或失灵 - 咨询按钮建议最小尺寸
44px × 44px（iOS 可触控最小面积），图标 + 文字横向排列比纯文字更易点中
适配移动端返回手势：别让悬浮条挡住右滑返回区域
iOS Safari 的右滑返回依赖屏幕最左侧约 40px 宽度，如果悬浮条里的按钮或整个条延伸到左边缘，会拦截手势，导致无法返回上一页。
立即学习“前端免费学习笔记（深入）”；
- 给悬浮条左右各留
12px边距：left: 12px; right: 12px;，再用margin: 0 auto;居中内容 - 不要用
width: calc(100% - 24px)，IE 不支持；改用max-width限制宽度，配合margin自动居中 - 若需在某些页面隐藏（如咨询页本身），用 JS 控制
display: none，而非删 DOM——否则路由返回时要重新挂载，状态难同步
加载时机不对？别在 DOMContentLoaded 后才 append
用户打开页面瞬间就该看到悬浮条，但如果 JS 等到 DOMContentLoaded 才插入，首屏渲染完成前会闪一下空白，尤其弱网下明显。
- 最佳做法：HTML 源码里直接写好
<div id="consult-bar">...</div>，CSS 控制显隐（初始opacity: 0; transition: opacity .2s），JS 只负责加active类触发淡入 - 如果必须动态加载（如从 CMS 接口取文案），至少用
document.write或document.currentScript前置插入，确保在<body>开始解析时就存在 - 避免在
window.onload后操作，此时图片、字体都加载完了，条出现得太晚，失去“即时咨询”意义
真实项目里最容易被忽略的是安全区适配和右滑返回冲突——这两个问题在开发机上看不出来，只有真机测试时才暴露，而且一出问题就是整块功能不可用。
