Разница между статическим и относительным позиционированием

Ответ 1

Статическое позиционирование - это модель позиционирования по умолчанию для элементов. Они отображаются на странице, где они отображаются как часть обычного потока HTML. Статически расположенные элементы не подчиняются правилам left, top, right и bottom:

Относительное позиционирование позволяет вам указать конкретное смещение (left, top и т.д.), которое относится к нормальной позиции элемента в потоке HTML. Поэтому, если у меня есть текстовое поле внутри div, я мог бы применить относительное позиционирование в текстовом поле, чтобы он отображался в определенном месте относительно того, где он обычно помещается в div:

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

И когда a position: relative применяется к родительскому элементу в иерархии:

Обратите внимание, что наш элемент абсолютно позиции связан элементом с относительно позиционированием.

И, наконец, исправлено. Фиксированное позиционирование ограничивает элемент в определенном положении в окне просмотра, которое остается на месте во время прокрутки:

Вы также можете наблюдать за тем, что элементы с фиксированными позициями не вызывают прокрутку, поскольку они не считаются связанными с окном просмотра:

В то время как абсолютно позиционированные элементы по-прежнему связаны видовым окном и будут вызывать прокрутку:

.. если, конечно, ваш родительский элемент использует overflow: ? для определения поведения прокрутки (если есть).

При абсолютном позиционировании и фиксированном позиционировании элементы выводятся из потока HTML.

Ответ 2

Позиция position позволяет использовать верхнюю/нижнюю/левую/правую позицию для позиционирования. Static не позволит вам сделать это, если вы не используете параметры маржи. Там разница между верхним и верхним краем.

Вам не нужно использовать статический много, поскольку он по умолчанию

Ответ 3

Вы можете увидеть простой обзор здесь: W3School

Кроме того, если я правильно напомню, что при объявлении относительного элемента он по умолчанию останется в том же месте, что и в противном случае, но вы получите возможность полностью позиционировать элементы внутри него относительно этого элемента, что я был очень полезен в прошлом.

Ответ 4

Относительное положение относительно нормального потока. Относительное положение этого элемента (с смещениями) относится к позиции, в которой этот элемент был бы нормально, если не был перемещен.

Ответ 5

Мэтью Эбботт имеет действительно хороший ответ.

Абсолютные и относительные позиционированные элементы подчиняются top, left, right и bottom командам (смещениям), где статические позиционированные элементы не соответствуют.

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

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

Ответ 6

В ответ на "почему CSS все равно будет выполнять позицию: static;" в одном scenerio, используя положение: относительное для родителя и положение: абсолютное для ребенка ограничивает ширину масштабирования для ребенка. В горизонтальной системе меню, где у вас могут быть "столбцы" ссылок, использование "width: auto" не работает с относительными родителями. В этом случае изменение его на "статический" позволит изменять ширину в зависимости от содержимого внутри.

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

Ответ 7

Статический: Элемент STATIC, который мы получаем, имеет значение DEFAULT (Нормальное позиционирование объектов).

Относительно: Относительно его текущей позиции, но можно перемещать. Или ОТНОСИТЕЛЬНЫЙ позиционированный элемент позиционируется относительно ITSELF.