绝大多数侧边悬浮窗必须用 position: fixed，因 sticky 在侧边栏场景无效；需设 right: 20px、z-index ≥1000、max-width: 100vw，并置于后保持语义与可访问性。
悬浮窗用 position: fixed 还是 position: sticky？
绝大多数侧边悬浮窗必须用 position: fixed，position: sticky 在侧边栏场景下基本无效——它只在滚动到触发阈值时才“粘住”，而侧边悬浮窗需要始终贴着视口边缘，不随页面滚动偏移。
关键点：固定定位的元素脱离文档流，需手动设置 top、right（或 left）值；同时要避免被其他 z-index 更高的元素遮挡。
-
right: 20px比left: auto更可靠，显式声明方向 - 务必设
z-index: 1000以上，尤其当页面用了第三方 UI 库（如 Element Plus 默认z-index最高才 2000） - 移动端需加
max-width: 100vw防止超出屏幕右侧
HTML 结构怎么写才不影响语义和可访问性？
悬浮窗不是装饰性元素，如果含按钮、链接或通知内容，就必须保留在 DOM 主流顺序中，并通过 aria-label 或 role="region" 明确用途。
错误写法是把悬浮窗丢在 最底部、靠 CSS 强行拉到右侧——这会破坏屏幕阅读器遍历顺序，且可能被某些 SSR 框架（如 Nuxt）的 hydration 逻辑误判为“动态插入内容”导致闪烁。
- 推荐放在
<main></main>或<article></article>后紧邻位置，视觉上靠 CSS 定位，结构上保持线性 - 若悬浮窗含交互控件（如“回到顶部”按钮），添加
tabindex="0"并监听keydown支持键盘聚焦 - 避免用
display: none隐藏，改用visibility: hidden+opacity: 0保证 ARIA 状态同步
如何防止悬浮窗挡住页面右侧滚动条？
Windows 系统默认滚动条占约 17px 宽度，right: 0 会让悬浮窗覆盖滚动条，用户无法拖动。这不是 bug，是 CSS 定位的自然结果。
- 保守方案：
right: 17px（但不同系统/浏览器滚动条宽度不同） - 更稳妥方案：用
@media (width >= 1024px)+scrollbar-gutter: stable both-edges（Chrome 96+ 支持），预留滚动条空间 - 最通用做法：监听
document.documentElement.clientWidth与window.innerWidth差值，动态计算右偏移量（差值即滚动条宽度）
示例 JS 计算逻辑：
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
移动端适配时容易漏掉的三个细节
侧边悬浮窗在 iOS Safari 和安卓 Chrome 上行为差异明显，光靠媒体查询不够。
- iOS Safari 中
fixed元素在地址栏收起/展开时会错位，需监听resize事件并重置top - 安卓部分浏览器（如 Samsung Internet）对
transform: translateZ(0)有渲染优化依赖，加该声明可减少闪烁 - 触摸设备需禁用
touch-action: none，否则会拦截页面本身的滑动手势；正确做法是仅对悬浮窗内按钮设touch-action: manipulation
真正麻烦的不是写出来，而是不同设备上滚动、缩放、横竖屏切换时的微小偏移——这些没法靠一套 CSS 解决，得靠真实设备反复验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
