必须用position: fixed而非absolute或float，因其唯一真正相对于视口定位，不受滚动、缩放、modal弹出等影响；absolute在父级含transform/filter时会降级为相对父级定位，float不脱离文档流且无法锚定视口右下角。
为什么必须用 position: fixed 而不是 absolute 或 float
因为只有 position: fixed 是真正相对于视口定位的——滚动、缩放、切换 tab、打开 Modal，它都不会偏移。而 absolute 一旦父级有 transform、perspective 或 filter，就会降级为相对该父级定位，常见现象是：Modal 弹出后图标上移、iOS Safari 中消失、Chrome 新标签页里跳到左上角。float 根本不脱离文档流，在 flex/grid 布局里直接失效，且无法锚定视口右下角。
right 和 bottom 的安全值怎么设才不压住系统 UI
写死 right: 20px; bottom: 20px 在小屏、高缩放比或 iOS 底部手势栏场景下极易被遮挡。实际应分层处理：
- 桌面端基础值建议用
right: 24px; bottom: 24px，留出视觉余量 - 移动端必须适配安全区：
bottom: calc(20px + env(safe-area-inset-bottom))，同时给加padding-bottom: env(safe-area-inset-bottom) - 缩放鲁棒性可选
right: clamp(20px, 5vw, 40px)，避免小屏溢出或大屏太远 - 若页面有固定底部导航栏（如高度 60px），
bottom至少设为80px，否则会被盖住
圆角、层级和点击失效的三个关键点
图标常因样式或堆叠逻辑错乱导致显示异常或点不动，核心在三处：
-
border-radius必须配合overflow: hidden使用，否则内部图标或阴影会溢出；要圆形就确保宽高等值 +border-radius: 50%，别用999px这类反模式 -
z-index不能省略，且需足够高（实测微信内需z-index: 2147483647）；若父容器有transform或opacity ，会创建新层叠上下文，导致子元素 <code>z-index失效 - 第三方组件（如 iframe、video）默认会覆盖
fixed元素，需显式加pointer-events: auto，并确认其z-index高于这些元素
移动端热区与交互反馈容易被忽略的细节
纯 CSS 实现时，最常漏掉的是触控友好性：
- 视觉尺寸 40×40px 的图标，至少要用
padding: 12px或伪元素扩展热区（如::after { inset: -12px; }），达到 WCAG 推荐的 48×48px 最小触控区 - iOS 上
:active默认无效，必须加-webkit-tap-highlight-color: transparent - 务必加
touch-action: manipulation，否则滑动页面时可能卡顿；再配cursor: pointer; user-select: none防误选 - 微信内置浏览器中，DOM 必须等
DOMContentLoaded后插入，且第三方 SDK（如客服对话）要等wx.ready()再绑定事件，否则点击无响应
env(safe-area-inset-*) 的兼容表现，以及祖先元素无意中带上的 transform 对 fixed 的静默干扰。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
