position

position

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

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

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

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

Пример