CSS中相对定位与绝对定位参照物究竟该如何确定？-css教程-PHP中文网

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

css中相对定位与绝对定位参照物究竟该如何确定？

相对定位参照物永远是元素自己原来的位置；绝对定位参照物是最近的、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）。这个过程不跳过任何层级，但只取「最近的一个」。

如果父 是 position: static（默认值），但祖父是 position: relative，那么 absolute 子元素就以为参照
若所有祖先都未显式设置 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 不贴底。