原生 alert() 无法定位，因其是脱离 DOM 的模态系统对话框；可控方案是用 DOM 模拟：动态创建 div，通过 getBoundingClientRect() 计算按钮位置并绝对定位，注意滚动偏移与定位上下文。
原生 alert() 无法定位，这是根本限制
浏览器的 alert() 是模态系统对话框，由操作系统或浏览器 UI 层直接渲染，完全脱离 DOM 流，任何 CSS、JavaScript 坐标操作都对其无效。你无法用 position: absolute 或 getBoundingClientRect() 把它“钉”在按钮下方——它压根不在这页的布局树里。
真正可控的方案：用 DOM 模拟警告框
要实现“显示在指定按钮正下方”，必须放弃 alert()，改用可定位的 HTML 元素。核心思路是：动态创建一个 <div>，用按钮的 <code>getBoundingClientRect() 计算位置，再设为绝对定位。
关键实操点：
- 获取按钮 DOM 后调用
button.getBoundingClientRect()，拿到bottom、left值 - 新元素的
style.position = 'absolute'，并设top为rect.bottom + window.scrollY（补偿滚动偏移） - 设
left为rect.left + window.scrollX，保证随页面滚动同步位移 - 务必给父容器加
position: relative或使用body作为定位上下文，否则可能相对视口错位
const button = document.getElementById('my-btn');
const rect = button.getBoundingClientRect();
const tip = document.createElement('div');
tip.textContent = '请确认操作';
tip.style.cssText = `
position: absolute;
top: ${rect.bottom + window.scrollY}px;
left: ${rect.left + window.scrollX}px;
background: #fff;
border: 1px solid #ccc;
padding: 8px 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 1000;
`;
document.body.appendChild(tip);
用 focus() 或 scrollIntoView() 辅助视觉对齐
即使 DOM 提示框已定位，用户滚动后按钮可能移出视野，导致提示框悬空。这时不能只靠初始坐标：
立即学习“前端免费学习笔记（深入）”；
- 点击按钮前先调用
button.scrollIntoView({ block: 'nearest' })，确保按钮可见 - 或监听
window.onscroll，动态更新提示框top和left（但要注意性能，建议防抖） - 更轻量的做法：把提示框作为按钮的兄弟节点插入 DOM，用
display: block+margin-top模拟“正下方”，避免绝对定位的滚动问题
第三方库如 toastr 或 Noty 默认不支持按钮锚定
这些库的定位通常是全局（top-right）、居中或底部，没有内置“相对于某个元素”的选项。如果硬要用，得手动传入坐标：
-
toastr.options.positionClass = 'toast-bottom-left'仅控制区域，不支持像素级锚定 - 必须覆盖其
onShown回调，在弹出后读取按钮位置，再用element.style.transform或重设top/left - 注意库内部可能用
transition或transform，直接改top可能被覆盖，优先查文档看是否提供container或target参数
复杂点在于：按钮尺寸变化、页面缩放、多屏 DPI 差异都会让像素计算偏移。最稳的方式仍是放弃“绝对跟随”，改用语义化交互——比如把提示内容内联到按钮下方，用 aria-live 触发屏幕阅读器，而非强求视觉悬浮定位。
