侧边悬浮窗必须用 position: fixed 而非 sticky，因其需脱离文档流、相对视口定位；配合 top/right 定位、z-index 和移动端适配（如 offcanvas、overflow-hidden）实现稳定悬浮与交互。
侧边悬浮窗用 position: fixed 而不是 position: sticky
很多人一上来就试 sticky，结果发现它只在滚动容器内生效，一旦父容器没设高度或溢出限制，悬浮就失效。侧边悬浮窗必须脱离文档流、相对视口定位，fixed 是唯一可靠选择。
实操要点：
-
fixed元素默认以 viewport 为参考，需手动用top/right（或bottom/left）指定位置，比如right: 20px; top: 50%; transform: translateY(-50%);实现垂直居中 - 避免遮挡 Bootstrap 导航栏或 footer，建议加
z-index: 1050（不低于.navbar的 1040） - 移动端要考虑屏幕宽度，
@media (max-width: 768px)下建议设display: none或改用底部固定按钮
用 Bootstrap 5 的 offcanvas 替代手写弹层逻辑
如果你需要的是「可展开/收起」的侧边功能窗（比如客服入口、快捷工具栏），别自己写 show/hide 动画和 backdrop——Bootstrap 5 原生 offcanvas 就是为此设计的，且支持 placement="end" 直接靠右。
关键配置：
- HTML 结构必须包含
data-bs-toggle="offcanvas"触发按钮 +class="offcanvas offcanvas-end"容器 - 不要漏掉
data-bs-backdrop="true"和data-bs-keyboard="true"，否则点击空白处或按 Esc 不关闭 - 若想默认展开，加
show类，但注意：这会让 JS 初始化时跳过动画，首次打开可能闪烁；更稳的做法是用document.addEventListener('DOMContentLoaded', () => { new bootstrap.Offcanvas(...).show(); })
悬浮按钮本身用 btn btn-primary btn-sm + position-absolute 微调
常见错误是把按钮直接塞进 offcanvas 里，导致它随面板一起滑入——实际需求往往是「常驻悬浮按钮 + 点击后弹出功能窗」，按钮和窗要分离。
推荐结构：
- 按钮用
<button class="btn btn-primary btn-sm position-fixed" style="right: 20px; top: 50%; transform: translateY(-50%); z-index: 1060;" data-bs-toggle="offcanvas" data-bs-target="#quickTools">⚙️</button> -
position-fixed是必须的，position-absolute会相对于最近的position: relative父元素，不可靠 - 图标建议用 inline SVG 或 Unicode，避免加载失败；如用 Font Awesome，确保 CDN 已引入且未被 CSP 拦截
移动端适配时注意 viewport 和滚动穿透
在 iOS Safari 上，offcanvas 展开后若内容可滚动，底层页面仍可能跟着动——这不是 Bug，是浏览器对 fixed 元素的默认行为。
缓解方式：
- 展开时给
<body>加class="overflow-hidden"（Bootstrap 5.3+ 自带该类），或手动设style="overflow: hidden" - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，否则fixed在部分安卓 WebView 中会错位 - 测试真机：模拟器常忽略 touch-action 和滚动阻断，iOS 真机上
touchmove事件可能被截断，必要时监听offcanvas.show后调用document.body.style.touchAction = 'none'
bootstrap.Offcanvas.getOrCreateInstance 这一步。 
