根本原因是按钮未按预期父容器定位，因父容器缺少position: relative，导致锚定到body或框架内部祖先；必须显式设置直接父容器为relative，并排查transform、框架结构等干扰因素。
表单里用 position: absolute 定位按钮却总偏移，根本原因不是写错了 top 或 right，而是它没按你预期的父容器定位——大概率是父容器没设 position: relative，导致按钮锚定到了 body 或某个 UI 框架内部的意外祖先上。
必须给直接父容器加 position: relative
表单按钮脱离文档流后，会向上查找第一个「已定位祖先」。如果 .form-group 或 .input-wrapper 是默认的 static，浏览器就会跳过它，继续往上找——可能落到 body、.page-container，甚至某个 Ant Design 内部的 div 上。
- 临时加
outline: 1px solid red到所有可疑父级，看哪一层框真正包裹了你期望的定位区域 - 在 DevTools 的「Computed」面板里查
offsetParent，它直接告诉你按钮实际参考的是谁 - 别依赖第三方组件 class 间接带出
position: relative，自己在 HTML 中显式写死：比如<div class="form-group" style="position: relative;"> - 如果父容器高度为 0（例如里面全是
absolute子项），top: 50%就等于top: 0，记得补min-height或留一个普通流子项占位
避免 transform 创建隐式包含块
哪怕父容器写了 position: relative，只要它同时有 transform（比如 translateZ(0)、scale(1)）、filter 或 will-change，就会创建新的包含块（containing block）。这时按钮的 top/left 就不再基于原始尺寸计算，而是基于缩放/变形后的视觉尺寸——结果就是你调好位置后一缩放，按钮就“飞走”。
- 用 Chrome DevTools 的「Layers」面板快速识别哪些元素被单独分层
- 临时删掉父级的
transform和filter，看按钮是否回归正常位置 - 真需要视觉变形，把按钮移出该父容器，改为相对于一个无
transform的更外层祖先定位 -
transform-origin不影响定位基准，改它解决不了偏移问题
用 transform 替代 top/left 微调更稳
直接改 top: 12px 容易受父容器 padding、border 干扰；而 transform: translateY(-50%) 是基于元素自身尺寸运算，不牵扯外部盒模型，缩放和响应式下也更可控。
立即学习“前端免费学习笔记（深入）”；
- 居中按钮推荐写法：
top: 50%; left: 50%; transform: translate(-50%, -50%) - 右上角图标徽标：
top: 0; right: 0; transform: translate(50%, -50%)（让图标右上角顶到父容器右上角） - 若父容器有
padding，top: 0是从 content box 起算，但transform不受此影响，热区更准 - 配合
box-sizing: border-box全局设置，避免padding导致尺寸失控间接影响定位
检查表单结构是否被框架劫持
很多 UI 框架（如 Element Plus、Ant Design）的表单组件内部已有完整定位结构，比如 .el-form-item 或 .ant-form-item-control 默认就是 position: relative。你再在外层套一层 absolute，极易和框架逻辑冲突。
- 用 DevTools inspect 元素层级，确认按钮的真实父节点是谁，而不是你以为的 HTML 结构
- 如果按钮必须放在框架组件内部，优先用它的 slot 或 API（如
append插槽），而非硬加absolute - 某些框架会动态添加 wrapper div，且带
overflow: hidden，导致absolute按钮被裁剪——可临时设overflow: visible排查 - 禁用框架 CSS（比如在 DevTools 里 uncheck 所有来自
element-plus.css的规则），看原生结构下是否还错位
真正麻烦的从来不是 top 值写多写少，而是你根本不知道它正对着谁算——尤其当多个 position: relative 层级嵌套、又混着 transform 和框架样式时，偏移会层层叠加，最后连 DevTools 都难一眼定位。先锁死直接父容器的定位上下文，再剥离视觉变形干扰，剩下的微调才真正可控。
