相对定位参照物是元素自身原始位置，不脱离文档流；绝对定位参照物是最近的非static祖先元素，找不到则回退至初始包含块（通常为）。

相对定位参照物永远是元素自己原来的位置；绝对定位参照物是最近的、position 不为 static 的祖先元素（“找爹妈”），找不到就 fallback 到初始包含块（通常是 ）。

relative 的参照物：只认自己，不看父级

设置 position: relative 后，top、left 等偏移量都是从该元素在正常文档流中「原本该出现的位置」起算。它不会脱离文档流，也不关心父元素有没有定位。

• 即使父元素是 position: absolute 或 fixed，对子元素的 relative 偏移毫无影响
• left: 20% 中的百分比，是相对于其**包含块（containing block）宽度**，不是相对于父元素的宽——这点常被误读
• 容易踩坑：给 relative 元素加 z-index 会创建新层叠上下文，可能意外遮挡其他元素，尤其和 absolute 子元素混用时

absolute 的参照物：必须“有爹”，且越近越好

position: absolute 元素会逐级向上查找第一个 position 值为 relative、absolute、fixed 或 sticky 的祖先元素（即非 static）。这个过程不跳过任何层级，但只取「最近的一个」。

• 如果父 <div> 是 <code>position: static（默认值），但祖父 <section></section> 是 position: relative，那么 absolute 子元素就以 <section></section> 为参照
• 若所有祖先都未显式设置 position，则 fallback 到初始包含块（一般等同于 ，但在某些 UA 中可能是视口）
• 常见错误：absolute 元素“飞出屏幕”或定位错位，90% 是因为忘了给某个中间父级加 position: relative（哪怕它本身不需要偏移）

为什么推荐父级用 position: relative 而不是 absolute？

虽然规范允许父级用任意非 static 值作为 absolute 子元素的参照，但实践中首选 relative：


CSS
CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
下载

立即学习“前端免费学习笔记（深入）”；

• relative 不改变父元素在文档流中的位置和尺寸，不影响布局稳定性
• absolute 父级自身已脱离文档流，可能导致其兄弟元素上移、容器高度塌陷等连锁问题
• relative 更易预测：它只是“占位但可偏移”，而 absolute 父级的定位逻辑又会再触发一次参照物查找，嵌套深了极易失控

初始包含块不是 ，这点特别容易忽略

当没有定位祖先时，absolute 元素的 top/left 是相对于「初始包含块」，不是 。在大多数浏览器中，这个块由 决定，但它的尺寸受 margin、border、transform 等影响——比如 有 transform: scale(0.9)，那 absolute 元素的像素计算就会缩放。

更隐蔽的是：如果 或 设置了 height: 100% 但没设 min-height: 100vh，初始包含块高度可能小于视口，导致 bottom: 0 不贴底。