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

Question

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

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

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

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

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

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

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

* 1015 Благодарения и *

Answer 1

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

Answer 2

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

Answer 3

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