Статическое позиционирование является моделью позиционирования по умолчанию для элементов. Они отображаются на странице, где они отображаются как часть обычного потока HTML. Статически расположенные элементы не подчиняются правилам left, top, right и bottom:
Относительное позиционирование позволяет вам указать конкретное смещение (left, top и т. Д.), Которое относительно нормальной позиции элемента в потоке HTML. Поэтому, если у меня есть текстовое поле внутри div, я мог бы применить относительное позиционирование к текстовому полю, чтобы оно отображалось в определенном месте относительно того места, где оно обычно размещалось бы в div:
Существует также абсолютное позиционирование - посредством которого вы указываете точное местоположение элемента относительно всего документа, или следующего относительно позиционированного элемента дальше вверх по дереву элементов :
И когда position: relative применяется к родительскому элементу в иерархии:
Обратите внимание, как наш абсолютно позиционный элемент связан относительно позиционированным элементом.
И, наконец, это исправлено. Фиксированное позиционирование ограничивает элемент определенной позицией в области просмотра, которая остается на месте во время прокрутки:
Вы также можете наблюдать поведение, когда фиксированные элементы не вызывают прокрутку, поскольку они не считаются связанными с окном просмотра:
Принимая во внимание, что абсолютно позиционированные элементы все еще связаны областью просмотра и вызовут прокрутку:
.. если, конечно, ваш родительский элемент не использует overflow: ? для определения поведения прокрутки (если есть).
При абсолютном и фиксированном позиционировании элементы выводятся из потока HTML.