¿Por qué la altura y el atributo superior no funcionan cuando la posición es relativa?

Question

Esto posicionará la caja un poco por debajo de la parte superior

<div style="height: 10em; width: 50%; left: 25%; top:2em; position: relative; background: white;">Hello World</div> 

Esto posicionará a la caja en la parte superior y parece que ni la altura ni la propiedad es superior
de trabajo. La altura de la caja no es del 50%, y la caja no está un 50% por debajo de la parte superior.

<div style="height: 50%; width: 50%; left: 25%; top:20%; position: relative; background: white;">Hello World</div> 

soy prácticamente un principiante en esta materia, pero parecería si se deja el trabajo y la anchura con un porcentaje no debe superar y la altura?

Answer 1

Su cuadro no puede tener un height que es un porcentaje de su elemento primario si su elemento primario no tiene una altura fija, porque entonces el cuadro no sabría qué tan alto debe ser (normalmente un padre así sería body o algún otro elemento de envoltura).

Como consecuencia directa, top con un porcentaje no tendrá ningún efecto tampoco.