Отрицательные поля против относительного позиционирования

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

Итак, вместо этого:

.sidebar {
    margin-left:-600px;
}

Можно было бы сделать это:

.sidebar {
    position:relative;
    left:-600px;
}

Похоже, что относительное позиционирование может быть даже более чистым в вертикальном направлении, поскольку на манипуляции с верхним полем могут влиять проблемы с краем полей и т. Д.

Есть ли у одного преимущества перед другим, или они практически эквивалентны?

Спасибо-


html layout css css-position margin
person Yarin    schedule 10.03.2011    source источник
comment
Я не думаю, что отрицательное левое значение работает в сафари с position relative.   -  person Ani    schedule 10.07.2014

Ответы (3)


arrow_upward
27
arrow_downward

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

person Anupam    schedule 10.03.2011

arrow_upward
11
arrow_downward

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

person Yarin    schedule 10.03.2011

arrow_upward
3
arrow_downward

Здесь используются и свойство position, и отрицательная маржа, и никто не лучше другого. Это зависит от того, что вы пытаетесь сделать. Вы не позиционируете каждый элемент относительно или абсолютно, когда хотите сдвинуть его влево-вправо вверх-вниз. Допустим, у вас есть простой тег <p>, который вы хотите переместить влево, вы не задаете ему свойство position, чтобы просто перемещать его. Маржа - это подходящий метод. Маржа будет влиять на положение других элементов на вашем сайте, где позиция будет плавной, не влияя на позиционирование других элементов. Свойство position, хотя и может использоваться по-разному, в основном оно используется для основных элементов, которые делают ваш сайт ex: пример, верхний колонтитул, нижний колонтитул, оболочка, меню, содержимое слева, содержимое справа.

person Hussein    schedule 10.03.2011
comment
@ Хусейн, можешь урезать свой ответ? Маржа повлияет на положение других элементов на вашем сайте, а позиция - нет. должен быть ваш ответ - все остальные ваши утверждения субъективны. - person Yarin; 10.03.2011