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.
No prison can hold Chairface Chippendale. And on a totally different topic ... my stuff:
Why should you try IntelliJ IDEA ?

This thread has been viewed 837 times.

All times above are in ranch (not your local) time.
The current ranch time is
Aug 19, 2018 13:59:37.