侧边悬浮条应通过 margin 为 fixed 元素预留空间、用 transition 控制 hover 动画、设 min-height 保障触控、用 @supports 降级兼容旧浏览器，并真机测试多场景适配。
Fixed定位让功能条“钉”在屏幕边缘，但滚动时内容被遮挡怎么办
用 position: fixed 实现侧边悬浮条最直接，但它会脱离文档流，导致正文滚动时被遮住。关键不是加 z-index，而是给主体内容留出足够外边距。
- 侧边条宽度为
60px，就在主体容器（如.main）上加margin-left: 60px（左悬停）或margin-right: 60px（右悬停） - 别用
padding代替margin——padding 不影响其他元素布局，遮挡问题照旧 - 如果主体是全屏高度的
flex布局，记得在父容器设overflow: hidden，否则 fixed 元素可能在 Safari 下溢出视口
Hover展开时卡顿、闪烁，其实是重绘触发太频繁
鼠标划过就立刻 expand 宽度，浏览器要反复计算 layout + paint，尤其在低配设备上明显卡。hover 动画本身没问题，问题出在「尺寸突变」和「无过渡约束」。
- 给悬浮条加统一
transition: width 0.25s ease-in-out, opacity 0.15s ease-in，别只写width，否则 opacity 突变会闪 - 初始状态用
width: 48px（图标区），hover 后设width: 200px，但必须配合overflow: hidden和white-space: nowrap，否则文字换行会撑高容器引发重排 - 避免在 hover 中动态插入 DOM 或请求数据——展开动作应纯 CSS，交互逻辑延后到点击后触发
移动端点按失效，因为 fixed 元素在 iOS Safari 下有点击延迟和捕获盲区
iOS Safari 对 fixed 层的 touch 事件处理更保守，尤其当它紧贴视口边缘或高度不足 44px 时，系统可能忽略点击。
- 给悬浮条加
min-height: 44px（iOS 推荐最小触控区域），哪怕图标只有 24px，也用padding补足 - 确保父级没设
pointer-events: none，且自身没被transform: translateZ(0)类 hack 意外禁用事件 - 真机调试时若点击无响应，检查控制台是否报
Unable to preventDefault inside passive event listener——这时要在touchstart监听器里加{ passive: false }，但更稳妥的做法是改用click事件 +cursor: pointer
IE11 或旧版 Android WebView 下 fixed 失效，fallback 方案不能只靠 JS 模拟
老环境里 position: fixed 渲染异常是常态，硬用 position: absolute + scroll 监听模拟，性能差还容易错位。优先用 CSS 规避，其次再降级。
立即学习“前端免费学习笔记（深入）”；
- 对 IE11，加
@supports not (position: fixed) { ... }，里面用position: absolute并绑定top: env(safe-area-inset-top)适配刘海屏 - 避免监听
scroll频繁更新 top 值——改用IntersectionObserver监听视口位置，或干脆在老设备上降级为底部常驻按钮（position: relative+margin-top: auto） - Webpack 打包时若用了
postcss-preset-env，确认已启用stage: 0，否则env()函数不会被转换
侧边悬浮条看着简单，真正难的是在各种缩放、横竖屏切换、系统字体放大、暗色模式下都保持可点、不遮挡、不抖动。大部分问题不出在「怎么写」，而出在「没测真机+没关开发者工具的模拟器惯性」。
