Win a copy of OCP Java SE 8 Programmer II Exam Study Guide this week in the OCP forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

position:relative is relative to what?  RSS feed

 
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?

 
Author and ninkuma
Marshal
Posts: 66536
160
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

 
M Burke
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66536
160
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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.
 
M Burke
Ranch Hand
Posts: 413
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So when the X Y coordinates are set they are based on where the element would be placed without positioning?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66536
160
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There's no such thing as x and y, it's left, top, right, or bottom, but yes.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!