悬浮球按钮必须用 position: fixed 定位，配合等宽高、z-index: 999、border-radius: 50%、合理 box-shadow 及透明边框扩大点击热区，菜单需单独定位并监听滚动重算位置。
悬浮球按钮必须用 position: fixed 定位
绝对定位（position: absolute）在滚动时会跟着内容跑，根本悬不住。只有 fixed 才能真正“钉”在视口角落。常见错误是套在某个容器里还忘了设 z-index，结果被其他层盖住——务必确保悬浮球的 z-index 大于页面主体（比如设成 999）。
推荐写法：
.floating-btn {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #4a6fa5;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 999;
}
圆角必须配合等宽高才能出正圆
border-radius: 50% 本身不保证圆形——它按盒模型宽高比例计算。如果 width 和 height 不相等，出来的是椭圆。很多初学者直接写 border-radius: 50% 却忘了约束尺寸，结果按钮拉长变形。
- 用
width和height显式设为相同值（如56px） - 避免用
max-width或min-height干扰尺寸一致性 - 若需响应式，用
vw单位并保持宽高一致（如width: 5vw; height: 5vw;）
阴影别只靠 box-shadow，要控制扩散与偏移
单写 box-shadow: 0 0 10px rgba(0,0,0,0.2) 容易发虚、没立体感。真实悬浮球需要明确的 x-offset、y-offset 和适度的 blur-radius 来模拟“浮起”效果。
典型参数组合：
box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 轻微下压感 */ /* 或更强一点 */ box-shadow: 0 6px 20px -4px rgba(0,0,0,0.2); /* -4px 负扩散收边，更聚焦 */
注意：spread-radius（第四个值）为负数时能收紧阴影边缘，避免模糊溢出，特别适合小尺寸悬浮球。
点击区域太小？用伪元素或透明边框撑开
纯 56px × 56px 的按钮，手指点不准，尤其在移动端。CSS 中不能直接放大点击热区而不影响视觉，得绕一下：
- 加
padding会撑大背景，破坏圆形——不行 - 用
::after伪元素覆盖更大范围，设pointer-events: none防干扰 - 更简单：加
border: 12px solid transparent，再用box-sizing: border-box把边框算进总尺寸里，视觉不变，热区扩大
后者实操最稳，兼容性好，也不额外增 DOM。
实际项目里最容易被忽略的是：悬浮球常要配合 JS 展开菜单，但很多人把菜单也塞进同一个 fixed 元素里，导致菜单定位错乱。菜单应单独定位，且需监听滚动/缩放重算位置——这点不在 CSS 范畴，但真上线时八成会卡在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
