最稳妥的弹出框定位方案是基于触发元素边界盒计算鼠标相对位置，并叠加滚动偏移与视口边界校验；需用 absolute 定位而非 fixed，确保兼容嵌套滚动容器，且须等待 DOM 尺寸稳定后再执行定位。
用 getBoundingClientRect() 获取鼠标位置再计算偏移
直接用 event.clientX 和 event.clientY 最简单，但要注意：它们返回的是视口坐标（viewport），而 position: absolute 的元素若父容器有 transform、perspective 或 filter，会触发新的定位上下文，导致 top/left 偏移失效。所以更稳妥的做法是基于触发元素的边界盒计算，再叠加鼠标相对该元素的位置。
常见错误是直接写 top: event.clientY + 'px'，结果弹出框在滚动后错位——因为没考虑页面滚动量。正确做法是加上 window.scrollY（或 pageYOffset）。
-
event.clientX+window.scrollX→ 水平文档坐标 -
event.clientY+window.scrollY→ 垂直文档坐标 - 弹出框自身宽高需提前获取（
offsetWidth/offsetHeight），避免右下角超出屏幕
限制弹出框不超出视口边界
鼠标靠近右/下边缘时，absolute 定位容易让弹出框被裁剪。不能只靠 max-width 或 overflow 解决，得动态调整 left 和 top，甚至切换方向（比如从右上改为左上）。
关键判断逻辑：
立即学习“前端免费学习笔记（深入）”；
- 若
mouseX + popupWidth > window.innerWidth，则设left = mouseX - popupWidth - 若
mouseY + popupHeight > window.innerHeight，则设top = mouseY - popupHeight - 为防贴边难点击，可加 8px 偏移：比如
left = Math.min(mouseX + 8, window.innerWidth - popupWidth)
为什么不用 position: fixed？
很多人第一反应是用 fixed 配合 clientX/clientY，看起来更“稳”。但问题在于：fixed 脱离文档流，无法感知父级滚动容器（比如一个 overflow: auto 的弹窗内部区域）。一旦弹出框要锚定在某个局部滚动区内的元素上，fixed 就完全失灵。
真正需要的是“相对于触发上下文”的定位，而不是相对于整个视口。所以 absolute + 正确的 offsetParent 处理才是通用解法。只有当弹出框明确属于全局层（如全站提示），才考虑 fixed。
完整 JS 定位逻辑示例
以下代码处理了滚动、边界、偏移，并兼容触发元素在任意嵌套滚动容器中：
function positionPopup(popup, event, options = {}) {
const { offsetX = 10, offsetY = 10, padding = 8 } = options;
const rect = event.target.getBoundingClientRect();
let x = event.clientX;
let y = event.clientY;
// 如果事件来自自定义坐标（如 canvas 点击），优先用它
if (event.offsetX !== undefined) {
x = rect.left + event.offsetX;
y = rect.top + event.offsetY;
}
const popupWidth = popup.offsetWidth;
const popupHeight = popup.offsetHeight;
const maxX = window.innerWidth - popupWidth - padding;
const maxY = window.innerHeight - popupHeight - padding;
popup.style.left = Math.max(padding, Math.min(x + offsetX, maxX)) + 'px';
popup.style.top = Math.max(padding, Math.min(y + offsetY, maxY)) + 'px';
}
调用时：positionPopup(document.getElementById('tooltip'), event)，并确保 popup 的 CSS 有 position: absolute; z-index: 1000;。
最易忽略的一点：如果弹出框内容动态加载（比如异步渲染），必须等 DOM 尺寸稳定后再调用定位函数，否则 offsetWidth 为 0。可用 setTimeout(() => positionPopup(...), 0) 或 requestAnimationFrame 触发重排后定位。
