必须用fixed，因其直接相对于视口定位且滚动不变；absolute受父容器transform等影响易失效，sticky仅在滚动范围内生效无法锚定右下角。

position: fixed 是实现悬浮按钮的唯一可靠方式，其他定位（如 absolute、relative）无法让按钮真正“悬浮”——即不随页面滚动而移动。

为什么必须用 fixed，而不是 absolute 或 sticky

absolute 依赖最近的 position: relative 祖先，一旦父容器有 transform、filter 或 will-change，它就失效（常见于现代框架布局）；sticky 只在滚动范围内生效，无法锚定到视口右下角。只有 fixed 直接相对于 viewport 定位，行为确定、兼容性好（IE9+ 支持）。

bottom 和 right 的取值不是凭感觉调的

实际部署时容易忽略移动端触控热区和安全区域：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• bottom: 20px 在 iPhone X 及更新机型上会被底部指示器遮挡，推荐至少 bottom: 34px（iOS 安全区域下限）
• right: 20px 在 RTL 页面（如阿拉伯语）会跑到左边，应改用 inset-inline-end: 20px 更健壮
• 若按钮需适配折叠屏或横竖屏切换，避免写死像素值，可配合 @container 或媒体查询动态调整

z-index 不是设得越高越好

设成 z-index: 9999 很常见，但隐患明显：

• 当页面已有 modal、toast 组件使用 z-index: 1000，你的按钮就会被盖住
• 不同 stacking context 之间 z-index 不可比，比如一个 transform 容器会创建新层叠上下文，内部元素再高的 z-index 也压不过外部同级元素
• 建议统一维护一份 z-index 表（如 modal: 1000、toast: 950、floating-button: 900），避免冲突

微信 WebView 和 iOS Safari 的隐藏坑

在某些环境下 fixed 按钮会异常跳动或被键盘顶起：

• iOS Safari 中软键盘弹出时，fixed 元素可能被错误重定位 —— 加 viewport meta 的 height=device-height 无用，有效解法是监听 focus 事件临时移除 fixed 并用 absolute + scrollY 模拟
• 微信内置浏览器（X5 内核）对 fixed 渲染有 bug，尤其在 body 有 overflow-x: hidden 时，按钮可能消失 —— 解法是确保 html 和 body 都没设置 overflow，或给按钮加 will-change: transform
• 部分 Android WebView 对 fixed 的 position 更新有延迟，滚动中按钮“滞后”，可用 transform: translateZ(0) 强制 GPU 加速

真正麻烦的从来不是写那四行 CSS，而是它在真实设备和复杂 DOM 结构里是否稳定出现。定位只是起点，后续的兼容性兜底和交互逻辑才是落地关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！