position: fixed 是唯一可靠选择，因其脱离文档流、始终相对于视口定位（如右下角）；absolute 受父元素 transform/overflow 影响易偏移或消失，relative 则随滚动移动而失去悬浮效果。
为什么必须用 position: fixed 而不是 absolute 或 relative
未读消息浮窗要始终贴右下角、不随滚动消失、不被轮播图或弹窗遮挡，position: fixed 是唯一可靠选择。absolute 会受父元素 transform、overflow: hidden 或 will-change 干扰，常见现象是 Modal 弹出后浮窗突然上移或 iOS Safari 中直接不可见；relative 则随页面滚动一起动，完全失去“全局”属性。
right 和 bottom 的安全值怎么设才不压住系统 UI
写死 right: 20px; bottom: 20px 在 iPhone X+、iPadOS 手势栏或 Windows 高缩放比下极易遮挡操作区域。实际应分层控制：
- 桌面端基础值：用
right: 24px; bottom: 24px（比 20px 更宽松） - 移动端适配：加媒体查询
@media (max-width: 768px) { bottom: 80px; }，避开 iOS 底部安全区 - 更鲁棒方案：用
right: calc(1.5vw + 12px); bottom: env(safe-area-inset-bottom, 24px);，自动兼容刘海屏与手势栏
hover 展开动画为什么别改 right，而要用 transform: translateX()
直接在 hover 时改 right 会触发 layout + paint，尤其在低端安卓机上卡顿明显；transform: translateX() 只走合成层，GPU 加速，且不影响文档流、不导致页面抖动。
- 初始状态：设
transform: translateX(100%);（完全移出右侧） - hover 时：改为
transform: translateX(0); - 务必写明过渡属性：
transition: transform 0.3s ease-out;，别用transition: all .3s，否则会意外过渡z-index或opacity
移动端点击失效、iOS 滑动卡顿的两个必加 CSS 属性
纯 CSS 实现的浮窗在 iOS Safari 上点不动、滑动迟滞，根本原因是浏览器没识别出这是可交互区域。必须加：
-
touch-action: manipulation;—— 告诉浏览器这个区域只做点击/轻触，禁用双指缩放和长按菜单 -
cursor: pointer; user-select: none;—— 防止误选文字，同时让手指悬停有视觉反馈
另外，z-index 至少设为 9999，并确认浮窗没有被祖先元素的 transform 或 overflow: hidden 截断层叠上下文——这是最常被忽略、排查最耗时的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
