why does height and top attribute not work when position is relative?

Question

This will position the box a little below the top

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

This will position the box near the top and it looks like neither the height nor top property is
working. The height of the box is not 50%, and the box is not 50% below the top.

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

I am pretty much a beginner at this stuff, but it would seem if left and width work with a percentage shouldn't top and height?

Answer 1

Your box can't have a height that's a percentage of its parent if its parent doesn't have a fixed height, because then the box wouldn't know how high it needs to be (typically such a parent would be body or some other wrapper element).

As a direct consequence, top with a percentage won't have any effect either.