it-swarm-ru.tech

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

В CSS, в чем разница между статическим (по умолчанию) позиционированием и относительным позиционированием?

76
jrdioko

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

statically-positioned elements obey normal HTML flow.

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

relatively-positioned elements obey HTML flow, but provide the ability to adjust their position relative to their normal position in HTML flow.

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

absolutely-positioned elements are taken out of HTML flow and can be positioned at a specific place in the document...

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

...or positioned relative to the first parent element in the HTML tree that is relatively positioned.

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

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

fixed-positioned elements are also taken out of HTML flow, but are not bound by the viewport and will not scroll with the page.

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

fixed-positioned elements have no effect on scroll.

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

absolutely-positioned elements are still affected by the boundaries of the viewport, unless overflow is used on a parent element.

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

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

147
Matthew Abbott

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

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

7
Stoffe

Относительное положение позволяет вам использовать верх/низ/влево/вправо для позиционирования. Static не позволит вам сделать это, если вы не используете параметры поля. Есть разница между вершинами и полями.

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

5
Undefined

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

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

3
user3233352

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

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

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

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

2
Connor Leech

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

2
AvadhootKulkarni

Static: STATIC позиционированный элемент - это то, что мы получаем с помощью DEFAULT (нормальное позиционирование объектов).

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

1
Arif