关于CSS top属性（relative定位）的MDN概念困惑求助

CSS代码 #

.text {
  position: relative;
  top: 50%;
  left: 50%;
}

HTML代码 #

<a class="text">Hello</a>

根据文档描述：

当position设置为relative时，top属性指定元素的上边缘相对于其正常位置向下移动的距离。

按上述描述，预期元素上边缘会相对于正常位置向下移动50%，但在EDGE 11.3中实际并未生效，请问原因是什么？

• 核心问题出在relative定位下百分比单位的参考逻辑：top属性使用百分比时，是相对于元素包含块的计算高度来计算的，而非元素自身高度。
• 默认情况下，元素的包含块（此处为<body>）没有显式设置高度，它的高度由内部内容（即这个<a>标签）撑开，此时包含块高度与元素自身高度几乎一致，设置top:50%仅相当于移动自身高度的一半，视觉上几乎看不到变化，甚至会因为布局流特性看起来完全没生效。
• 若要让top:50%产生明显效果，需给包含块（如<body>或父容器）设置明确高度，示例如下：

body {
  height: 100vh; /* 让body占满整个视口高度 */
}
.text {
  position: relative;
  top: 50%;
  left: 50%;
}

此时top:50%会基于视口高度的50%来移动元素，效果会清晰呈现。

内容的提问来源于stack exchange，提问作者samre ray