position: fixed 侧边悬浮错乱主因是父容器含 transform/perspective/filter 时创建新包含块，致定位基准偏移；应检查并清除干扰样式、挂载至 body 子级或用 layers 面板排查。
用 position: fixed 实现侧边悬浮，但页面滚动时位置错乱
根本原因是 fixed 脱离文档流后，会相对于视口定位，但若父容器有 transform、perspective 或 filter，就会创建新的包含块，导致定位基准偏移。常见于用了 transform: translateZ(0) 做硬件加速的容器，或带 filter: drop-shadow() 的 wrapper。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查浮窗最近的、有 CSS 变换/滤镜/透视的祖先元素，给它加
transform: none或移除相关声明 - 优先把浮窗挂到
直接子级，绕过中间层干扰 - 用 Chrome DevTools 的 “Layers” 面板确认浮窗是否意外进入了某个合成层
移动端点击失效或触控区域太小
很多社交图标用 <span></span> 或伪元素实现，没设 display: inline-block 或 touch-action: manipulation，在 iOS Safari 上点不触发，或需要双击才响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有可点击的浮窗按钮必须是
<a></a>或带role="button"的<div>，且有明确的 <code>tabindex="0" - 最小触控尺寸设为
44px × 44px（iOS 最低推荐），用min-width/min-height保证，别只靠 padding - 加
touch-action: manipulation减少 300ms 延迟，但注意：若浮窗内含滑动内容（如分享列表滚动），需改用pan-y - 用
calc(100vw - 56px)替代固定像素值（56px是图标宽 + 内边距），让右侧距离随视口动态变化 - 对
max-width: 768px加媒体查询，把浮窗从右侧移到底部：用bottom: 20px+left: 50%+transform: translateX(-50%) - 避免在
@media (orientation: landscape)里仅改top/bottom，要配合width和transform重置整个布局 - 完全放弃纯 CSS 的
:hover控制菜单显隐，改用 JS 绑定click+focusout（监听浮窗外点击） - 若坚持用 CSS，至少加
@media (hover: hover) and (pointer: fine)媒体查询包裹:hover规则，确保只在鼠标设备生效 - 给浮窗容器加
outline: none，防止键盘聚焦时出现多余虚线干扰视觉
不同屏幕宽度下浮窗遮挡内容或贴边太紧
fixed 元素的 right 或 left 值写死（比如 right: 20px）在小屏上会压住滚动条，大屏又离边缘太远；更麻烦的是，某些安卓浏览器在横屏切换时不会重绘 fixed 元素位置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
分享按钮 hover 效果在触摸设备上残留
PC 端靠 :hover 显示子菜单，但手机端第一次点击后，:hover 状态常被“卡住”，菜单不收起，再点别的按钮也没反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是 fixed 元素的 z-index 层级冲突——尤其当页面用了第三方 UI 库（如 Ant Design、Element Plus），它们的弹窗、通知组件 z-index 常设得极高（9999+），而你随手写的 z-index: 999 就会被盖住。调试时别只看自己的 CSS，先用 DevTools 检查 computed z-index 值和 stacking context 形成路径。
