absolute定位的“最近非static祖先”是DOM中向上遍历首个position计算值非static的祖先元素，而非声明值；其top/left相对于该祖先的padding box，且z-index仅在同层叠上下文中生效。
absolute 定位的“最近非 static 祖先”到底是谁？
不是父元素，不是 body，是离它最近、且 position 值不为 static 的那个祖先。很多人以为设了 position: relative 的父容器就“一定”是参考点——但只要中间还夹着一个 position: absolute 或 fixed 的祖先，它就会跳过父级，往上找。
- 浏览器从当前元素向上遍历 DOM，逐个检查
position计算值（不是声明值），遇到第一个非static就停，不管它是不是父级 -
position: sticky在未触发粘性行为时，计算值仍是static，所以它不会成为参考点 - 如果所有祖先都是
static（包括html和body），则回退到初始包含块（通常是 viewport）
为什么加了 position: relative 还没用？
常见错误是只在父元素上写 position: relative，但父元素本身被更上层的 absolute 容器包裹，导致子元素的定位参考点其实是那个更上层的容器，而不是你预期的“父级”。
- 用浏览器开发者工具检查目标元素的
offsetParent（JS 中），它返回的就是实际参考节点，比猜更准 - 注意：
display: contents会让父元素“消失”在布局树中，此时即使写了position: relative，也不会成为offsetParent - 某些 CSS 框架（如 Bootstrap）默认给
body设position: relative，可能意外成为深层absolute元素的参考点
top/left 是相对于谁的边界？
是相对于参考元素的 padding box（内边距框），不是 content box，也不是 border box。也就是说，top: 0 会贴在参考元素的 padding-top 边界处，而不是内容顶部。
- 这个行为和
transform不同：transform: translateY()是基于自身盒模型，而top是基于参考元素的 padding box - 如果参考元素设置了
box-sizing: border-box，不影响top的计算基准——它始终认 padding box - 当参考元素有滚动条时，
top仍以 padding box 的原始位置为起点，不会随滚动偏移
嵌套 absolute 容器的 z-index 失效问题
z-index 只在同一个层叠上下文（stacking context）内生效。一旦父元素创建了新的层叠上下文（比如设置了 z-index 且 position ≠ static），它的子 absolute 元素的 z-index 就只在这个小范围内比较，无法和外部兄弟元素直接比高低。
- 常见诱因：父容器同时满足
position≠static+z-index≠auto（哪怕只是z-index: 0） - 想让子元素“穿透”父层叠上下文？做不到。只能调整父级的
z-index，或把需要参与全局层叠的元素提级到同一层 -
opacity、filter、will-change等属性也会隐式创建层叠上下文，容易被忽略
事情说清了就结束。真正麻烦的从来不是“怎么设 absolute”，而是查清那个“最近非 static 祖先”到底藏在哪一层、有没有被某个看不见的 z-index: 0 或 opacity: 0.99 暗中截胡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
