弹窗滚动后位置突变是因为未给滚动容器设置position: relative，导致absolute定位参考了body而非滚动区；修复需确保滚动容器有relative定位、显式overflow且弹窗挂载其内部。
弹窗在滚动容器里一滚动就飞走，不是 JS 计算错了，是它压根没绑定对定位上下文。
为什么滚动后弹窗位置突变
根本原因是 position: absolute 弹窗的定位参考对象错了：它本该相对于触发它的那个可滚动 <div class="scrollable"> 定位，但你没给这个父容器加 <code>position: relative，浏览器只能往上找，最后落到 或视口上。一旦父容器滚动（scrollTop > 0），弹窗的 top 值还是按初始静态位置算的，自然就“飘”了。
- 打开 DevTools，选中弹窗元素，在「Computed」面板看
Containing block是谁——大概率是body，而不是你预期的滚动区 - 检查滚动容器是否漏了
position: relative；某些 UI 库（如 Ant Design 的.ant-modal-root）会悄悄覆盖这个行为 - 别把弹窗
append到document.body—— 这直接切断了和滚动祖先的 DOM 关系
必须让弹窗挂载到滚动容器内部
组件库（如 Bootstrap、Element Plus、Ant Design）默认把弹窗挂到 body，这是偏移的根源。要修复，就得强制它归属到最近的可滚动祖先节点下。
- Bootstrap Tooltip：用
container: '.scrollable-list'，且确保该容器有overflow-y: auto但不是hidden - Element Plus Dialog：通过
teleport指向滚动区，例如<el-dialog :teleport="'#scroll-container'"></el-dialog> - Ant Design Modal：设
getContainer={() => document.getElementById('scroll-container')} - 手动创建的弹窗：JS 创建后，用
parentElement.appendChild(tooltip)插入到滚动容器内，而非document.body
滚动容器本身也要满足定位前提
光挂对地方还不够——如果滚动容器自己不构成有效的定位上下文或布局约束，弹窗照样错位。
立即学习“前端免费学习笔记（深入）”；
- 给滚动容器加
position: relative（哪怕只是空声明），否则它无法成为absolute元素的 containing block - 避免在滚动容器上设
transform、will-change或align-items: center—— 这些会干扰position: sticky或改变定位基准线 - 若容器高度由子项撑开，而子项全是
absolute，记得补一个min-height或留个普通流元素占位，否则top: 100%会算成0px - 不要用
overflow: hidden包裹滚动容器来“防溢出”——它会让弹窗被裁剪，看起来像消失
精确定位推荐 top + transform 组合
只靠 top/left 在滚动+缩放场景下极易漂移，尤其当弹窗需要居中、贴右下角或对齐图标某一点时。
- 粗定位用
top: 100%/right: 0，再用transform: translate(-50%, -50%)精校准中心点 - 右上角徽标：写
top: 0; right: 0; transform: translate(50%, -50%)，比硬调left: calc(100% - 24px)更稳 - 避免同时写
left和right—— 浏览器会反推宽度，容易触发横向滚动条（尤其 Safari） -
transform不参与盒模型计算，不影响父容器布局，也不受margin/padding干扰
最常被忽略的是：滚动容器是否真的“被浏览器识别为可滚动上下文”。仅靠内容溢出不够，必须显式声明 overflow-x 或 overflow-y，且不能是 visible。否则，哪怕你把弹窗塞进去，它也找不到锚点。
