position: absolute 元素始终相对于最近的非 static 祖先定位，若无则退至初始包含块（视口）；top/left 值以该祖先的 padding box 为基准，而非 content 或 border box。
要让 position: absolute 元素相对于某个祖先（而非直接父元素）定位，关键不是“跳过父级”，而是控制浏览器向上查找时停在哪一层——它总会停在「最近的已定位祖先」，所以你要做的，是确保那个目标祖先确实是 DOM 中离它最近的 position 计算值非 static 的节点。
为什么加了父元素 position: relative 还是没用？
常见现象：你给直接父元素加了 position: relative，但子元素依然相对更上层容器或视口定位。原因通常是中间夹着一个已定位祖先，比如：
- 父元素上面还有一层
position: absolute或fixed的 wrapper，它优先被选中 - 父元素用了
display: contents，导致它在布局树中“消失”，无法成为offsetParent - 某些 CSS 框架（如 Bootstrap）默认给
body设了position: relative，深层子元素可能意外以它为参考
验证方式：打开浏览器开发者工具，选中该 absolute 元素，在 “Computed” 面板里找 containing block，或在 Console 里运行 document.querySelector('.my-el').offsetParent，返回的才是真实参照节点。
top/left 是相对于祖先的哪个框？
不是 content box，也不是 border box，而是 padding box —— 即从祖先元素的内边距起点开始计算偏移。这意味着：
-
top: 0会让元素贴住祖先的padding-top边界，不是内容区顶部 - 祖先若设了
box-sizing: border-box，不影响该基准；它始终认 padding box - 祖先若有滚动条，
top值仍以原始 padding box 位置为起点，不随滚动变化
这点和 transform: translateY() 完全不同，后者基于自身盒模型，而 top 是纯定位上下文依赖。
嵌套多层 relative 祖先时，怎么确保只认目标层？
浏览器不会“跳过”某层去认更远的祖先，只会严格取第一个非 static 的计算值。所以：
- 如果目标祖先和
absolute元素之间还有其他已定位节点（哪怕只是position: relative），它们就会截断查找链 - 不要在无关祖先上随意加
position: relative—— 多加一个，就可能让下层absolute元素突然换锚点 - 若必须保留中间层的
relative（比如为了z-index控制），又想让子元素绕过它，唯一办法是把absolute元素提到那层之外，或者移除中间层的定位声明
DOM 层级深了之后，靠肉眼判断“最近”非常容易出错；offsetParent 和 “Computed → containing block” 是唯一可靠依据。
最常被忽略的一点：祖先是否塌陷。即使定位上下文正确，如果目标祖先高度为 0（比如内部全是 absolute 子项且没设 height 或 min-height），那么子元素看似飘在空中——其实它正好好地按 top/left 贴在那个看不见的 padding box 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
