根本原因是浮动父容器未设position: relative，导致absolute子元素跳过它直接锚定到或更上层定位元素；必须在直接父级显式声明position: relative并确保其有可靠高度。
根本原因不是 absolute 写错了，而是它压根没认你写的那个浮动父容器为参照物——float 不创建定位上下文，position: absolute 只找 position: relative/absolute/fixed/sticky 的祖先。
浮动父容器没设 position: relative
浮动本身不触发「已定位祖先」，哪怕父容器同时有 float: left 和 width，absolute 子元素仍会跳过它，一路向上找到 或更外层的定位元素作为 offsetParent。
- 临时验证：用 DevTools 选中该
absolute元素，在「Computed」面板里看offsetParent是谁 - 修复方式：直接给浮动父容器加
position: relative（顺序无关，float和position: relative可共存） - 别依赖组件库 class 间接带出
position: relative，必须写在你控制的 HTML 父节点上
浮动父容器高度塌陷导致定位起点漂移
子元素全 float 且未清除时，父容器高度为 0，虽然 position: relative 已生效，但 top 计算起点是内容盒顶部——而这个“顶部”可能被上一个有高度的兄弟元素撑开，视觉上就偏了。
- 典型现象：
top: 10px实际离父容器上边距远不止 10px - 优先用
display: flow-root替代overflow: hidden来创建 BFC，避免意外裁剪下拉菜单或box-shadow - 若需兼容 IE11，用伪元素清除法：
.parent::after { content: ""; display: table; clear: both; }，并配height: 0; visibility: hidden;
absolute 元素宽高为 0 或被裁剪
在浮动结构里，absolute 元素默认宽高由内容决定，又不参与文档流，常出现“DOM 存在但页面不可见”，或因父容器 overflow: hidden 被截断。
- 必须显式设置尺寸，例如：
width: 100%、min-height: 32px，或用inset: 0铺满 - 检查父容器是否误加了
overflow: hidden—— 它会剪掉所有超出 padding box 的absolute内容，和float无关，是定位上下文的剪裁行为 - 若父容器有
transform、filter或will-change，会创建新包含块，让absolute绕过你设的relative父级
真正麻烦的从来不是调不准 top 值，而是你根本不知道它正对着谁算；一旦父容器既浮动又没清空、还没设 position: relative，那它的定位行为就完全不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
