直接用 top: 0; left: 0 定位菜单会因未校验边界及忽略滚动容器偏移导致裁剪或漂移；应基于按钮 getBoundingClientRect() 结合 window.scrollX/Y 计算文档坐标，并动态调整方向与位置。
为什么直接用 top: 0; left: 0 会出问题
菜单弹出后贴着按钮左上角，但鼠标靠近视口右/下边缘时，菜单常被裁剪——因为没做边界校验。更隐蔽的问题是：若按钮在滚动容器（如 overflow: auto 的侧边栏）里，event.clientX/clientY 返回的坐标是视口坐标，而 position: absolute 定位基准却是该滚动容器，两者不匹配，导致定位漂移。
用 getBoundingClientRect() + 滚动偏移算真实坐标
必须基于触发按钮的位置计算，而不是鼠标点位置。这样能天然兼容嵌套滚动上下文：
- 调用
button.getBoundingClientRect()获取按钮在视口内的位置 - 加上
window.scrollX和window.scrollY转成文档坐标 - 再根据菜单宽高，动态决定是放在按钮下方+右侧，还是上方/左侧避让
示例关键逻辑：
const rect = button.getBoundingClientRect();
const docX = rect.left + window.scrollX;
const docY = rect.bottom + window.scrollY; // 放在按钮下方
const popupWidth = popup.offsetWidth;
const popupHeight = popup.offsetHeight;
<p>// 防右越界
let left = docX;
if (docX + popupWidth > window.innerWidth) {
left = window.innerWidth - popupWidth - 8;
}</p><p>// 防下越界
let top = docY;
if (docY + popupHeight > window.innerHeight) {
top = rect.top + window.scrollY - popupHeight - 8;
}</p><p>popup.style.left = left + 'px';
popup.style.top = top + 'px';
position: absolute 的父容器必须设 position: relative
否则 top/left 会向上找最近的已定位祖先，大概率落到 body 上，导致定位完全失准。这个设置不能省，也不能靠 position: fixed 替代——fixed 无视父级滚动，一滚动就错位。
立即学习“前端免费学习笔记（深入）”；
- 确保按钮和菜单同属一个
position: relative容器，比如<div class="dropdown-wrapper"> - 菜单元素本身用
position: absolute，且z-index显式设为正值（如100） - 避免给菜单父容器加
transform、perspective或filter，它们会创建新的定位上下文，干扰计算
移动端和小屏要额外处理方向回退
纯靠“下方+右侧”在窄屏上大概率失败。得加方向判断逻辑：
- 优先尝试
bottom: 100%+left: 0（上拉） - 若按钮靠近顶部，则切到
top: 100%+left: 0（下拉） - 水平方向同理：按钮靠右时改用
right: 0，甚至加transform: translateX(-100%)右对齐 - 别依赖
max-width自动收缩——先测offsetWidth，再决策布局方向
真正难的不是写定位代码，而是每次 DOM 更新（比如菜单内容动态加载）后，必须重新测量尺寸并重算位置。漏掉这步，菜单就会错位或截断。
