用 position: fixed 实现底部悬浮条最直接，设 bottom: 0（或 bottom: 20px）+ right: 20px + z-index: 1000 即可稳贴视口右下角；需加 viewport 元标签防 iOS 失效，弹层出现时应隐藏悬浮条避免遮挡。
用 position: fixed 实现底部悬浮条最直接
不需要 JS，纯 CSS 就能稳稳贴在视口底部。关键不是“页面底部”，而是“浏览器窗口底部”——这样滚动时它才不会消失。
常见错误是误用 position: absolute 或给父容器加 relative，结果一滚动就跑偏。固定定位必须脱离文档流，且参照物是 viewport。
-
bottom: 0是核心，不是top: auto或靠 margin 推 - 加上
left: 0和right: 0让它横跨全宽（否则可能只占内容宽度） - 务必设
z-index，至少大于页面主体内容（比如z-index: 1000） - 如果页面有底部 footer，悬浮条默认会盖在它上面——这是预期行为；若需避让，得额外计算 footer 高度并设
bottom: 60px这类值
客服按钮常要“右下角+微上浮”，别硬塞 margin-bottom
直接写 bottom: 20px 比用 margin-bottom: -20px 可靠得多。后者在 fixed 元素上无效，还容易引发渲染错乱。
右下角定位更常见，此时应组合使用：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
position: fixed-
bottom: 20px（离底边距离） -
right: 20px（离右边距离） -
width: 60px、height: 60px控制尺寸，避免撑开布局
示例结构：
<div class="kefu-float"><button>?</button></div>对应样式：
.kefu-float { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; z-index: 1000; }
iOS Safari 下 fixed 有时失效？加 viewport 修正
老版本 iOS Safari（尤其是微信内置浏览器）对 position: fixed 支持不稳定，滑动时可能闪动或卡住。根本原因常是 viewport 缩放被干扰。
在 <head> 里补这行能大幅改善：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 去掉
user-scalable=yes很关键，缩放会破坏 fixed 定位锚点 - 如果业务必须支持缩放，就得改用
position: sticky+ 监听 scroll 手动更新位置（但复杂度高，一般不推荐） - 测试时务必真机连 Safari 开发者工具，模拟器表现不准
点击后弹出客服面板，别让 fixed 条挡住关键操作
悬浮条本身是入口，不是终点。弹层出来后，用户焦点转移，但悬浮条还在那儿——可能遮住弹层的关闭按钮或输入框。
- 弹层显示时，临时隐藏悬浮条：
document.querySelector('.kefu-float').style.display = 'none' - 或者更稳妥：加个
.kefu-float--hidden类，用opacity: 0; pointer-events: none保持 DOM 存在但不可见不可点 - 千万别用
visibility: hidden—— 它仍占布局空间，fixed 元素虽不占文档流，但某些安卓 WebView 会误判 - 返回页面时记得恢复，否则用户下次进站就找不到入口了
这个细节很多人忽略，直到用户反馈“点不开客服”才排查到是悬浮条挡住了弹层的触发区域。
