Как работает позиционирование CSS

Как работает позиционирование CSS

CSS-свойство position позволяет управлять тем, как браузер отобразит переданные элементы. Есть 4 типа позиционирования: абсолютное, относительное, фиксированное и статическое.

Абсолютное позиционирование позволяет определить расположение элемента, задавая позиции: left, right, top, bottom в px, em или процентах. Абсолютно размещенные объекты полностью отделены от потока страницы. Элементы на странице просто не знают что существует абсолютно позиционированные элемент, они могут даже исчезнуть попав под него.

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

position: absolute;

Относительное позиционирование размещает элемент относительно его текущего положения в потоке HTML, то есть относительно того меся где он должен был появится. Перемещение элемента с относительным позиционированием оставляет дыру, на месте которой он должен был находится.

position: relative;

Фиксированное позиционирование прикрепляет элемент на определенное место на экране. Когда посетитель прокручивает страницу, фиксированные элементы остаются на экране.

position: fixed;

Статическое позиционирование – это обычный метод расположения элементов, то как браузеры представляют содержимое с начала существования Интернета.

position: static;

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