必须给父容器加position: relative，因为absolute元素会以最近的已定位（relative/absolute/fixed/sticky）祖先为参考点；若父容器为默认static，则向上回溯至body或意外容器，导致定位错位。
表单输入框定位错位，常见原因是 absolute 定位元素的父容器没有设置 position: relative，导致它向上逐级查找最近的已定位祖先，最终可能相对于 body 或某个意外容器偏移。
为什么必须给父容器加 relative？
absolute 定位的元素会脱离文档流，并以最近的已定位（position 值为 relative / absolute / fixed / sticky）祖先元素为参考点进行偏移。如果父容器是默认的 static（CSS 默认值），浏览器就会跳过它，继续往上找——这往往造成位置“飘走”或与预期严重不符。
正确做法：精准控制定位上下文
- 给包裹输入框（或其直接定位容器）的父级元素设置 position: relative
- 确保该父容器有明确的宽高或内容撑开，避免因高度塌陷导致定位基准“悬空”
- 输入框本身设为 position: absolute，再用 top/right/bottom/left 精确调整位置
- 如需居中对齐，可配合 transform: translate(-50%, -50%) 配合 left: 50%; top: 50%
容易忽略的细节
- 检查是否有多层嵌套，relative 必须加在“真正想作为参考”的那层父容器上，不是最外层 wrapper 就一定是它
- 父容器若设置了 overflow: hidden，且 absolute 子元素超出范围，会被裁剪——可临时改为 visible 排查
- 某些 UI 框架（如 Element Plus、Ant Design）的表单组件内部已有定位结构，自行加 absolute 前先 inspect 元素层级，避免冲突
一个最小可复现示例
错误写法（错位）：
<div class="form-group">
<input type="text" class="input-abs">
</div>
<p>.input-abs { position: absolute; top: 10px; left: 20px; }
/<em> 缺少父级 relative → 相对于 body 定位 </em>/
修复后：
立即学习“前端免费学习笔记（深入）”；
<div class="form-group" style="position: relative;">
<input type="text" class="input-abs">
</div>
<p>.input-abs { position: absolute; top: 10px; left: 20px; }
/<em> 现在相对于 form-group 定位，位置可控 </em>/
