为何相对定位元素的top使用百分比单位无法实现垂直偏移？

核心逻辑：百分比偏移依赖包含块的明确高度 #

给position:relative的元素设置top百分比时，这个值是基于元素的**包含块（containing block）**高度计算的。如果包含块的高度是auto（即由内部内容自动撑开，未显式设置height属性），浏览器会把百分比偏移值视为0，自然看不到偏移效果。

逐个拆解场景 #

1. 直接在body中使用top:20%无效

你的第一个示例里，div的包含块是body元素——而body默认没有设置height，它的高度完全由内部div撑开（也就是300px），但这种自适应的高度属于auto类型，并非显式指定的固定高度。此时浏览器无法基于“自动高度”计算百分比偏移，因此top:20%等价于top:0，元素没有任何垂直偏移。

而top:20px是固定像素值，不需要依赖包含块高度，所以能正常生效。

2. 放入容器后top百分比生效

当div被放进一个设置了明确高度的容器（比如给容器加height: 600px），此时div的包含块变成这个容器。容器的高度是显式指定的固定值，浏览器可以直接用这个高度计算百分比偏移（比如20%就是600px×20%=120px），偏移效果自然正常显现。

验证小实验 #

如果想让第一个示例中的top百分比生效，只需给html和body设置显式高度：

html, body {
  height: 100%;
}
div{
  position:relative;
  height:300px;
  width:300px;
  top:20%;
}

此时body的高度为视口的100%，包含块有了明确高度，top:20%就会基于视口高度的20%实现偏移。

内容的提问来源于stack exchange，提问作者Pranav Anand