Всем привет, в этой статье я расскажу и покажу, для чего нужно свойство position, применяемое в html/css.
На самом деле, эти свойства используются в большинстве проектов front-end разработчиков, т.к. они упрощают работу с блоками кода в плане размещения на странице.
Различают несколько свойств position: static, relative, absolute, fixed, sticky. Разберем каждый из них по порядку.
Для наглядного примера будем использовать простую структуру блоков, идущих по порядку.
Static
Значение Static является значением блока по умолчанию для всех элементов. Соответственно, он будет отображаться в том порядке, в котором был указан в документе html. Это значение используется довольно редко.
Пример кода:
В этой части кода указано позиционирование блока и его цвет. Так он будет отображаться на странице. В рамке размещен указанный блок
Relative
Данное свойство определяет позицию блока относительно его расположения на странице. К примеру, мы хотим чтобы второй блок был чуть ниже других, и для мы не можем использовать свойство padding и margin. Для этого мы будем использовать такой код:
Для свойства relative необходимо указать хотя бы 2 свойства из 4: top, right, left, bottom. Зачастую используют top и right. Эти свойства указывают, откуда должен быть отступ, и на сколько. Пример реализации кода:
Как видим, блок сдвинулся на указанные в коде параметры.
Absolute
Это свойство схоже с предыдущим, больше сказать, они взаимосвязаны. Оно отличается тем, что задает положение элемента на странице независимо от других элементов. Рассмотрим на примере:
В этом коде мы также указали два параметра для позиционирования, но теперь второй параметр изменен. Посмотрим выполнение кода:
Как видим, нужный блок как-бы выходит из ряда, и теперь расположен независимо от других.
Fixed
Это свойство используется для того, чтобы "прилепить" элемент к какой-либо точке. При прокрутке страницы этот блок будет оставаться на месте, и сдвинуть его получится только изменением свойства позиционирования. Для него также используются параметры top, left, right, bottom. Рассмотрим на примере:
Как видим из кода, мы указали цвет и позицию нужного блока. Посмотрим, что вышло:
Стоит помнить, что свойства top, left, right и bottom указываются относительно границ документа. Несоблюдение этого правила может внести непредвиденные ошибки в документе.
Sticky
Это свойство схоже с предыдущим, но работает иным образом. Элемент находится на своем месте до тех пор, пока не достигнет определенной точки, которую пользователь укажет в свойствах top, left, right и bottom. Как только эта точка достигается, блок "прилипает" к экрану, и остается на одном месте до обратной прокрутки к его позиции в документе. Рассмотрим код:
Так мы обозначим нужный код. Теперь посмотрим реализацию:
Блок находится в нужном положении относительно документа html, пока мы не прокрутим вниз.
Для закрепления изученного, рекомендую создать подобную структуру самостоятельно, и опробовать каждое свойство. Спасибо за внимание!