position

Блочная модель

position

Свойство position позволяет точно определить положение элемента на странице

Значение атрибута position	comment
static	Значение по умолчанию, означает отсутствие позиционирования Элементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе Используется для очистки любого другого значения позиционирования
relative	Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает При этом такой элемент может перекрывать другое содержимое на странице
absolute	Абсолютно позиционированный элемент удаляется из потока документа и позиционируется относительно границ содержащего его контейнера или окна браузера Контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого равно relative
fixed	Положение элемента фиксируется относительно viewport, сам элемент при этом удаляется из основного потока документа Элемент не меняет своего положения во время прокрутки страницы

^{- будут работать top, right, bottom, left}

---

position: relative

Элементы позиционируются относительно своего нормального ( статического ) положения

Добавление атрибутов left, top, right и bottom приводит к сдвигу элемента относительно его положения в нормальном потоке ( static )

Положительное значение left приводит к сдвигу элемента вправо относительно его левой границы, отрицательное — влево

Положительное значение top задаёт сдвиг элемента вниз, отрицательное — сдвиг вверх

Атрибуты bottom и right дают противоположный эффект

Если атрибут right имеет положителное значение, то элемент сдвигается влево относительно его правого края

если же атрибут right имеет отрицательное значение, то элемент сдвигается вправо

При положительном значении атрибута bottom элемент сдвигается вверх, а при отрицательном смещается вниз

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

---

position: absolute

При абсолютном позиционировании элемент существует вне основного потока

Его положение задаётся относительно границ окна браузера с помощью CSS-атрибутов left, top, right и bottom

При этом у атрибутов left и top приоритет выше, чем у right и bottom

Если left и right противоречат друг другу, то значение right игнорируется

То же самое происходит и с атрибутами top и bottom

Если left задать отрицательное значение, то элемент уйдёт за левую границу окна браузера

Аналогично с отрицательным значением атрибута top: элемент скроется за верхней границей окна браузера

Полоса скроллинга при этом не появится

Таким образом можно спрятать элемент от просмотра

Когда значение атрибута left превышает ширину окна браузера или right имеет отрицательное значение, появляется горизонтальная полоса прокрутки

Полоса вертикального скроллинга веб-страницы появляется, когда значение атрибута top отрицательное, или значение атрибута bottom превышает высоту окна браузера

Если ширина width элемента не указана явно, то она вычисляется путем вычитания из ширины окна браузера значений left и right ( если они определены )

Аналогично с высотой элемента height: если она не задана, то вычисляется на основании значений атрибутов top и bottom

---

position: fixed

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

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

Ещё одно отличие фиксированого позиционирования от абсолютного заключается в том, что при выходе элемента за границы окна браузера полоса скроллинга не появляется

Пример