定位元素参考的是第一个 position 不为 static 的祖先，若无则回退到 <html>；需检查父级是否漏设 position: relative，注意 Flex/Grid 容器默认不构成定位上下文，且 body 的 padding-right 和 <html> 默认 margin 均可能引发偏移。
定位元素参考的是谁？先查 Containing block
绝对定位元素的 top/left 不是相对于页面左上角，而是相对于第一个 position 不为 static 的祖先（即 relative、absolute、fixed 或 sticky）。如果没找到，就回退到 <html>——而它的默认 margin 或被重置样式干扰后，视觉上就会“偏了”。
打开开发者工具，选中该元素，在「Computed」面板里直接看 Containing block 一栏，它会明确告诉你当前参考的是哪个节点。
- 逐级向上检查父节点是否漏写了
position: relative，尤其注意外层<form>、.wrapper或 UI 库自带 class（比如 Bootstrap 的.input-group）是否偷偷加了定位 - 临时给疑似父容器加
outline: 1px solid red，看红色框是否包裹你预期的定位区域 - Flex / Grid 容器本身默认是
position: static，不构成定位上下文；必须显式设position: relative才能让子absolute元素以它为锚点
滚动时 fixed 元素右移？检查 body 的 padding-right
Bootstrap 5 等框架在模态框打开时，会给 <body> 加 modal-open 类并注入 padding-right（约 15–17px），用来补偿滚动条消失造成的横向抖动。但 position: fixed 元素不受 body 内边距影响，结果就是向右偏移一块滚动条宽度。
- 不要手动覆盖
body的padding-right，容易破坏滚动补偿逻辑 - 把
.is-fixed类加到所有可能偏移的 fixed 元素上（如导航栏、全屏背景图），Bootstrap 5 会自动为其同步调整内边距 - 若不用 Bootstrap，可监听
modal-open类变化，用 JS 动态给 fixed 元素补right: 17px或改用transform: translateX()补偿
拖放后元素落点不准？坐标没转成容器内坐标
拖放释放时直接用 e.clientX/e.clientY 设置 left/top，会导致元素偏移到视口坐标系下的位置，而非目标容器内部。典型表现是向右下偏移几十像素。
立即学习“前端免费学习笔记（深入）”；
- 必须用
e.target.getBoundingClientRect()获取目标容器左上角在视口中的位置 - 再算：
const x = e.clientX - rect.left，const y = e.clientY - rect.top - 确保目标容器已设
position: relative，否则absolute子项会飘到上级定位祖先甚至<html> - 别用
cloneNode(true)复制拖拽元素——ID 重复会引发后续选择器失效，直接移动原始节点即可
自定义光标滚动错位？用 clientX + fixed 定位
用 pageX/pageY 配合 position: absolute 的光标，滚动时会“被拖走”，因为 absolute 参考的是文档流位置，而 pageX 随滚动条变化；clientX/clientY 是视口坐标，天然匹配 position: fixed。
- 把光标元素的 CSS 改为
position: fixed - JS 中监听
mousemove，只用e.clientX和e.clientY更新left/top - 避免在移动端用
clientX做 touchmove 坐标——要取e.touches[0].clientX，否则拿不到值
真正麻烦的不是某一种偏移，而是多个机制叠加：比如一个 Flex 容器里放了 fixed 光标，又在内部做拖放，还弹了 Bootstrap 模态框——这时候得一层层确认每个元素的定位上下文和坐标系是否对齐。最容易被忽略的是 <html> 默认 margin 和 body 动态 padding 这两个“隐形锚点”。
