Правая панель “Позиции Relative, Absolute, fixed и координаты блока в пространстве”

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Изначально все элементы редактора имеют позицию relative (если вы не используете упрощенный режим и там не указано иное).

Ниже подробнее опишем каждое из свойств:

Relative

Положение элемента устанавливается относительно его исходного места. При смещении он будет влиять на другие блоки страницы и так же менять их расположение. В данном позиционирование верстаются большинство элементов сайта. Так же этот режим позволяет обеспечить максимальную адаптивность сайта.

Absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента. Используйте данный режим позиционирования, когда вам необходимо сверстать сложные элементы дизайна, которые тяжело сделать со свойством relative.

Fixed

По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

Координаты блока в пространстве

По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Используйте данные настройки, что бы задать блоку положение в пространстве. Значения могут задаваться как в px так и в %. Рекомендуется использовать для создания адаптивных элементов, которые должны изменять свое положение в зависимости от разрешения экрана, например, в этом случае. Здесь имеется 4 изображения, которые меняют свой размер в зависимости от разрешения экрана и необходимо что бы логотип по центру (1) при любых разрешениях всегда находился по центру. В этом случае перенесите контейнер с логотипом в тот же контейнер, в котором находятся 4 изображения. Затем выставьте у логотипа позицию absolute и укажите соответствующие значение координат, в процентах.

Смещение блока

На этой панели вы можете быстро переместить блок в нужное вам положение.