下拉气泡定位

解决什么具体问题

当你在按钮旁渲染自定义下拉菜单或自研气泡时，直接写死 top:100% 很容易在贴底时被窗口裁切；当浮层靠边时，固定偏移也会导致内容超出可视区域。手动计算坐标还要处理滚动、resize 后的重排，逻辑分散且容易遗漏边界情况。

技能如何工作

这个技能只聚焦一个职责：锚点与浮层元素的定位计算。它依赖 @floating-ui/dom 的 computePosition 得到相对坐标，再把结果写入浮层的 top / left。核心步骤包括：

• 打开下拉或气泡后调用 placeFloating(btn, menu) 触发一次定位。
• 监听滚动和 resize，并做节流重算，避免频繁布局抖动。
• 开启 flip 能力，当空间不足时自动把浮层翻到锚点另一侧。
• 开启 shift 能力，让浮层沿边缘平移，防止被屏幕或容器裁切。

典型适用场景包括：自定义下拉菜单贴按钮定位、Demo 字段旁的轻量 Popover、以及任何需要“锚点 + 浮层”关系的局部浮层。

适用边界与注意点

技能明确不做完整 Headless UI 套件，也不提供焦点陷阱、键盘导航等交互层逻辑；如果你需要无障碍菜单或表单联动，需要自行补齐。实现时必须引入 @floating-ui/dom，而不是用 top:100% 硬编码后声称已使用 Floating UI。

另外，避免与 tippy 等成熟气泡库在同一场景重复造两套定位逻辑。滚动和 resize 的重算应做节流，否则连续滚动可能引发不必要的 computePosition 调用。代码中涉及原创实现的要点建议用 小四原创 注释标出，便于后续维护和追溯。