悬浮窗和侧边栏是两件事：悬浮窗必须用position: fixed实现视口固定，侧边栏响应式布局优先用flex或grid；aside是语义标签，无默认定位行为，仅加标签不加css仍为普通块级元素堆在主文下方。
直接说结论：悬浮窗和侧边栏是两件事，别用同一个思路处理；加悬浮窗必须用 position: fixed，而响应式侧边栏优先用 flex 或 grid，只在明确需要“永远不滚动”时才上 fixed。
为什么不能直接给 aside 加 class 就变悬浮？
aside 是语义标签，不是定位容器——浏览器默认把它当普通块级元素渲染，不会自动贴右、固定或悬浮。常见错误是写了 <aside></aside> 就以为完事了，结果内容堆在主文下方，一动不动。
- 必须显式加 CSS 定位：比如
position: fixed; right: 20px; top: 50%; transform: translateY(-50%); - 如果父容器有
transform、perspective或filter（哪怕只是transform: translateZ(0)），fixed会失效，变成相对那个父级定位 - 检查开发者工具的 “Computed” 面板，确认
position确实是fixed，且top/right值没被覆盖 - 结构上，把悬浮容器直接挂到
下，别嵌套在<header></header>或带will-change的 wrapper 里
position: fixed 悬浮窗怎么防移动端误触和遮挡？
右下角悬浮球在 iPhone 上点一下就消失、滑动时卡顿、或者被系统手势盖住，多半是交互细节没做全。
- 加
touch-action: manipulation和user-select: none，防止长按选中或拖拽误触发 - 移动端留操作安全区：
@media (max-width: 480px) { bottom: 80px; }，避开手指常触区域 - 不要用
left: auto——CSS 不识别这个值，right才是明确声明 - 收起逻辑必须覆盖三种路径：菜单项点击、外部点击（
event.target.closest('.floating-ball, .floating-menu') === null）、Escape键；移动端还要监听touchstart替代click
响应式侧边栏该用 flex 还是 fixed？
多数场景下，flex 更稳。用 fixed 的唯一正当理由是：你确定它必须“永远不随页面滚动”，且能接受手动预留空间、处理 z-index 层叠冲突。
- 用
flex：主容器设display: flex，侧边栏和main并排；小屏用媒体查询改flex-direction: column，自然折叠 - 用
fixed：必须给main加margin-left（左栏）或margin-right（右栏）预留空间，否则内容会被遮住 - 别混用：同时设
position: fixed和flex子项，Chrome 和 Safari 解析行为不一致 - 断点别写成
@media (max-width: 768px)——iPad 也匹配，导致平板端误折叠；推荐@media (max-width: 480px)处理小屏，@media (min-width: 481px) and (max-width: 1024px)单独控 iPad 宽度
悬浮菜单展开位置怎么动态对齐不偏移？
写死 top/right 在缩放、滚动、响应式下必然错位。真实项目里必须靠 JS 动态算。
- 点击触发时，调用
ball.getBoundingClientRect()获取悬浮球当前视口坐标 - 菜单
top设为rect.bottom + 8，right设为window.innerWidth - rect.right，保证右对齐且留间距 - 拖动松手后吸附：算球心离四边距离，任一边 ≤ 40px 就贴边，但要用
right/bottom而非left/top，避免父级transform干扰 -
z-index别设 999999——压住 devtools 或视频控件；100～999 足够，且要确认父容器没创建局部层叠上下文
真正难的不是写出来，而是让悬浮窗在缩放、滚动、第三方 SDK 注入、iOS touch 事件、屏幕阅读器聚焦等所有边界条件下都“不崩”。这些细节不提前想，上线后修一个 bug 往往要翻三遍 DOM 结构和 CSS 层叠规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
