用 position: fixed 实现右下角悬浮窗最可靠，需设 right 和 bottom 值并配 z-index；transform 微调更安全；移动端需 js 监听键盘避免遮挡；注意层叠上下文对 z-index 的限制。
用 position: fixed 锚定右下角是最直接的方式
悬浮窗口不随滚动消失，核心就是脱离文档流并绑定视口。position: fixed 是唯一能稳定实现这点的 CSS 定位方式，absolute 或 relative 都会受父容器或滚动影响。
常见错误是只设 right: 0 却忘了 bottom: 0，结果窗口卡在右上角或被遮挡；或者用了 top + right 但没考虑移动端键盘弹出时视口高度收缩，导致窗口被顶出屏幕底部。
- 推荐基础定位组合：
right: 20px+bottom: 20px（留白防边缘遮挡） - 避免写死
left或top值，除非明确要左上悬浮 - 务必加
z-index: 9999，否则容易被轮播图、弹窗等覆盖
transform 微调位置比改 px 值更安全
当需要精确对齐图标边缘、或适配不同尺寸图标时，直接改 right/bottom 容易引发响应式错位。用 transform: translateX() 或 translateY() 移动元素本身，不影响布局流，也不触发重排。
例如：一个宽高 60px 的 QQ 图标，想让其右边缘贴住屏幕但图标中心点对齐，可写：right: 0; transform: translateX(-50%) —— 这样无论图标尺寸怎么变，都始终靠右居中。
- 慎用
transform: scale()单独缩放悬浮窗，可能让点击热区失准 - 搭配
transition: transform 0.2s ease可做悬停浮起效果，比改top更性能友好
移动端必须处理键盘弹出导致的视口偏移
iOS 和 Android 在输入框聚焦时会压缩可视区域（尤其是 Safari），fixed 元素可能被键盘顶出屏幕外。这不是 bug，而是浏览器行为。
纯 CSS 无法监听键盘，必须配合 JS 判断：window.innerHeight 变化 + focusin 事件。简单方案是：检测到输入框聚焦时，临时把悬浮窗 display: none；失焦后再恢复。
- 不要依赖
@media (max-height: 600px)做判断，实际键盘高度不固定 - 若用
position: absolute替代fixed，虽避开键盘问题，但滚动时窗口会消失——得不偿失 - 微信内置浏览器对
fixed支持不稳定，建议加一层body { position: relative }作为兜底参考系
层级和点击穿透问题常被忽略
悬浮窗盖不住其他元素？大概率是祖先元素设置了 transform、opacity 或 <code>will-change，触发了新的层叠上下文，把 z-index 限制在局部范围内。
典型场景：轮播图组件内部用了 transform: translateX()，导致同级的悬浮窗无论 z-index 多高都压不住它。
- 查问题先看悬浮窗父级是否意外创建了层叠上下文（Chrome DevTools → Elements → Computed → “Layer”）
- 修复方式：给悬浮窗父容器加
isolation: isolate，或把悬浮窗直接挂到下 - 点击穿透（点不到悬浮窗下面的内容）不是 bug，是预期行为；若需穿透，加
pointer-events: none到悬浮窗容器，再单独给按钮设pointer-events: auto
z-index 有用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
