Why doesn't the height and top attribute work when the position is relative?

Question

This position will be located above the top.

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

This position will be located near the top, and it appears that neither the height nor the top property are located. 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 new to this material, but it would seem if the left and the width of the work with the percentage should not exceed the height?

Answer 1

Your field cannot have height percentage of its parent if its parent does not have a fixed height, because then the box will not know how tall it is (usually such a parent is body or some other shell element).

As a direct consequence, top with a percentage will also have no effect.