FAQ: CSS Display and Positioning - Position: Relative

Aha!! finally i just read all the above answers and now i totally understand.Thanku very much for your explanations…

1 Like

Very good :slight_smile: Also, nicely done reading all the answers. Being able to research something with existing information is very useful :slight_smile:

Hello guys,

Here is the result of me playing with the jsbin link.

Thanks a lot stetim94

Thanks for asking this question, I had same question! If I understood well it is because all questions are moved down same amount of px.

No, you have not answered the question directly. You either start with an example or tell the person to answer themselves, never actually answering the question.

Your first answer says this:

  1. the divs move down, why? because the margin is applied then it is ‘rendered’. Yeah, the whole page is rendered.
  2. Then apply ‘move’. huh? again the elements are ‘rendered’. dah. Then the element is pushed down causing overlap. No idea what you’re trying to say here.

In no part of that do you explain why the second question is not moved down as well.

“So all the questions move down, but because they all move down an equal amount (40px, 400px or whatever value you give them), the relative distance between the questions stays the same.”

This is just wrong, it’s not the relative distance between them it is the relative position from where it was supposed to be, on each element.

W3 says; “the position element is positioned relative to its first positioned (not static) ancestor element”: CSS position property. So I assume it is only applied to the first class in a series or maybe the first css property hence why the second property does not get effected.

Okay, from watching videos. Putting ‘relative’ means relative to where it should originally show up but ALSO it is then using the value we set. In this example it is ‘40px’ from the top. So here are the steps:
Step 1: The object gets the position it should be in ignoring the rules we are about to apply.
Step 2: We then set the rules on it: the margin, padding or whatever and set it to ‘relative’, meaning it will be compared from the step 1 position.
Step 3: It is then moved based on the rules we set but is ‘relative’ to that original spot, not the top or whatever.

Okay, from watching videos. Putting ‘relative’ means relative to where it should originally show up but ALSO it is then using the value we set. In this example it is ‘40px’ from the top. So here are the steps:
Step 1: The object gets the position it should be in ignoring the rules we are about to apply.
Step 2: We then set the rules on it: the margin, padding or whatever and set it to ‘relative’, meaning it will be moved from the step 1 position (relative) in whatever way we have speficified. In our case it is 40px or 400px.
Step 3: It is then moved based on the rules we set but is ‘relative’ to the original spot, not the top or whatever. So they all move 400px from their own original spot. Meaning they all move down 40 or 400px.

Is there a time when i need to use all 4 offset properties in 1 ruleset?