[Logo]
Forums Register Login
position:relative is relative to what?
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?

You have applied inline-block to the elements which makes offset properties such as left irrelevant.

For block elements, a position of relative makes the origin the natural position of the element.

MDN has the following to say:

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?
 

M Burke wrote:But when you say, "natural position of the element." I am not clear on that.


Where the element would appear without applied CSS positioning.
So when the X Y coordinates are set they are based on where the element would be placed without positioning?
There's no such thing as x and y, it's left, top, right, or bottom, but yes.

This thread has been viewed 873 times.

All times above are in ranch (not your local) time.
The current ranch time is
Nov 17, 2018 10:01:05.