HTML позиция: относительная

Question

Учитывая следующий CSS

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

Я бы ожидать, каждый из литий должны быть расположены на 20 пикселей левее, чем это было бы без позиции относительно.

Однако, случается так, что при изменении значения слева, все, если элементы меню перемещаются относительно левой позиции. Другими словами, пространство между элементами не изменяется.

Хотя есть другие способы достижения желаемого, мне любопытно, почему оба элемента перемещаются, а расстояние между ними не меняется.

Спасибо, -dmd-

Answer 1

, потому что это то, что margin-left для.

Вот иллюстрация: если мы с тобой ходим бок о бок, и мы оба делаем 20 шагов вперед, вы и я все равно будем бок о бок.

Аналогичным образом, position: relative не принимает во внимание новое расположение других элементов position: relative вокруг него. Все они движутся относительно того, где они находятся, а не относительно того, где сейчас находятся другие элементы.

В MDN entry для position: relative состояний:

Это ключевое слово выкладывает все элементы, как если бы элемент не был расположен, а затем отрегулировать положение элемента, не меняя раскладку (и, таким образом, оставляя зазор для элемента, в котором это было бы, если бы оно не было расположено).