CODEWITHSUNDEEP
htmlcssposition
Dave Davis
Dave Davis

Reputation: 574

HTML position:relative

Given the following css

li.menuitem{
position:relative;
top:0;
left:20px;
display:inline;

I would expect each li to be positioned 20 pixels further left than it would be without position relative.

However, what happens is that as I change the value of left, all if the menu items move together in relation to the left position. In other words, the space between items does not change.

While there are other ways to achieve what I want, I am curious as to why both items move and the distance between then does not change.

Thanks, -dmd-

Upvotes: 1

Views: 59

Answers (1)

castletheperson
castletheperson

Reputation: 33466

Because that is what margin-left is for.

Here's an illustration: if you and I are walking side-by-side and we both take 20 steps forward, you and I would still be side-by-side.

Similarly, position: relative doesn't take into account the new positioning of other position: relative elements around it. They all move relative to where they naturally are, and not relative to where other elements now are.

The MDN entry for position: relative states:

This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).

Upvotes: 1

Related Questions