绝对定位的参照物是最近的已定位祖先元素（position为relative/absolute/fixed/sticky），若无则回退到初始包含块（视口）；transform等属性会隐式创建包含块，overflow非visible时会裁剪超出部分。
绝对定位的参照物是最近的「已定位祖先元素」
不是父元素，不是 body，也不是 viewport —— position: absolute 的偏移基准，严格遵循 CSS 规范中的「包含块（containing block）」规则。关键在于：它找的是**最近的、position 值为 relative、absolute、fixed 或 sticky 的祖先元素**，而不是任意父级。
- 如果所有祖先都
position: static（默认值），那最终回退到「初始包含块」——通常是视口（viewport），效果上类似相对于定位，但本质不同 -
position: relative的元素虽不脱离文档流，但能成为子元素的定位上下文，这点常被忽略 -
position: fixed的元素以视口为包含块，与文档滚动无关；而absolute仍随其定位祖先一起滚动
怎么快速判断某个 absolute 元素的参照物？
打开浏览器开发者工具，选中该元素，在「Computed」面板里找 Containing Block 一行（部分浏览器如 Chrome 120+ 已显示），或手动向上遍历祖先：
- 检查每个祖先元素的
position计算值（注意：不是声明值，inherit或unset要展开） - 第一个非
static的祖先即为参照物；若无，则是初始包含块 - 特别注意：
transform、will-change、filter等属性会**隐式创建包含块**（CSS Containment），即使position: static也会打断“向上找”的链条
/* 示例：这个 div 不会以 body 为参照，而是以 .wrapper 为参照 */
.wrapper {
position: relative;
width: 400px;
height: 300px;
}
.box {
position: absolute;
top: 20px;
left: 30px; /* 相对于 .wrapper 的左上角 */
}
position: absolute 遇到 overflow: hidden 为什么会被裁剪？
因为裁剪（clipping）作用于「包含块」的边界，而非定位上下文本身。即使参照物是 .wrapper，只要它的 overflow 不是 visible，且 .box 超出其内容盒（content box），就会被裁剪。
-
overflow: hidden/auto/scroll会让该元素成为「剪裁容器（clipping container）」 - 裁剪边界 = 包含块的
padding box（注意：不是 border box） - 即使
.box设置了z-index很高，也无法突破这个剪裁 - 绕过方式：把
.box移到.wrapper外层 DOM，或让.wrapper的overflow: visible
容易被忽略的边界情况
包含块规则在某些组合下行为反直觉，尤其是涉及 writing-mode、transform 和根元素时：
立即学习“前端免费学习笔记（深入）”；
-
元素的包含块是「初始包含块」，尺寸等于视口，但它的margin、border不影响absolute子元素的计算 - 设置了
transform的祖先（哪怕transform: none）会强制成为包含块，覆盖position判断逻辑 - 在
writing-mode: vertical-rl下，top/bottom对应的是行内方向起始/结束，不是物理上下 -
position: absolute元素自身的width/height百分比值，是相对于其包含块的宽高，不是父元素
包含块不是靠猜出来的，它是可追溯、可验证的机制。真正卡住的时候，别急着调 z-index 或加 !important，先用 DevTools 确认「谁才是那个包含块」。
