The way an element is positioned relative makes no sense to me. When you give a relative element a top and left coordinate, what is that coordinate relative to? Absolute is easy, it's 'relative' to its parent container. But if I position:relative the left value seem wrong. I made this example to test the behavior. Div5 has a left=600px and div6 has left=500px. But div5 is closer to the left edge than div6. Why is that?
MDN wrote:A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.
Ok, I removed the inline-block and the left property behaves more as I would expect. I also observe that display:block uses height and width, but display: inline does not.
But when you say, "natural position of the element." I am not clear on that. So are the left and top properties then computed based on the position of the containing div? In this case, the div with id = top? And also takes in account the line break that display:block provides?