根本原因是绝对定位元素的参照物（定位上下文）为最近的非static祖先，而非预期父容器；需用开发者工具查Computed中Containing block或逐级检查父节点position值定位。
为什么 position: absolute 的表单元素会突然偏移？
根本原因不是写错了 打开浏览器开发者工具，选中错位的元素，在「Computed」面板里搜索 不硬调 .form-group .help-text {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
} 某些 UI 库或框架默认会给表单组件加定位，比如 Bootstrap 的 立即学习“前端免费学习笔记（深入）”； 定位错位问题本质是「参照系失控」，而不是数值没调准。花 30 秒确认真正的 containing block，比反复试 top 或 left，而是没意识到绝对定位的参照物（定位上下文）发生了变化。浏览器会沿着 DOM 向上查找第一个「非 static 定位」的祖先元素作为参考系——这个祖先可能不是你预期的父容器，而是某个被无意加了 position: relative 的外层 ，甚至 。如何快速定位真正的定位上下文？
position，看它的 Containing block 是谁；更直接的方法是：在 Elements 面板中逐级向上检查每个父节点的 position 值，直到找到第一个不是 static 的（即 relative、absolute、fixed 或 sticky）。.form-wrapper { position: relative; }，但你根本没注意到它存在 标签本身被设为 position: relative（比如为了配合浮动清除或 z-index 控制），结果所有子级 absolute 元素都以它为原点 或 才发现 position: relative，那基本就是全局样式库或重置 CSS 搞的鬼修复错位的三种实用方式
top/left 数值，而是从定位逻辑入手：
position: relative（哪怕它原本是 static），确保它是最近的非 static 祖先position: static（即不写 position 属性，或显式写 position: static）position: fixed 或 position: sticky 替代（仅适用于特定场景，比如固定提示气泡或悬浮按钮），但要注意它们的参照系分别是视口和滚动容器.form-group {
position: relative; /* 明确声明，让子元素 absolute 以它为基准 */
}
表单中特别容易踩坑的组合
.input-group、Ant Design 的 Form.Item 内部结构，或自定义的 label + input + icon 布局。一旦你在其中某个节点加了 position: relative（比如为了图标居中），就可能意外创建新的定位上下文。
或 设置了 position: relative —— 它们本不该承担定位职责display: flex 或 display: grid 容器上同时加 position: relative，除非你清楚自己在做什么；Flex/Grid 本身已有强大布局能力，混用容易引发意外交互transform: translate() 替代 top/left 微调位置时，不会改变定位上下文，且性能更好，适合动画或动态偏移top: -5px 有效得多。
