Позиционирование элемента - это положение элемента внутри страницы (системы координат). Страница представляет собой систему координат. Начало этой системы по умолчанию находится в верхнем левом углу страницы и имеет значение 0 по осям X (горизонталь) и Y (вертикаль). 

Система координат

Позиционирование элемента также ведётся с верхней левой точки элемента (верхний левый угол элемента) по умолчанию. Эта точка и есть положение элемента на странице и имеет цифровое значение по оси X и Y.

Перемещая элемент по странице, будут меняться значения по осям X и Y. Также мы можем изменять позицию отсчета для элемента. Это значит, что мы можем отсчитывать позицию элемента от границ:

  • Слева (по оси X, от верхнего левого угла системы координат, положение элемента по умолчанию).
  • По центру (по оси X).
  • Справа (по оси X, от правого угла системы координат, страницы).
  • Верх (по оси Y, от верхнего края системы координат, положение элемента по умолчанию).
  • По центру (по оси Y).
  • Низ (по оси Y, от нижнего края системы координат, страницы).

Управление позиционированием даёт возможность изменять положение элементов на странице, накладывать один элемент на другой, определять положение элемента относительно другого, регулировать размер элемента, фиксировать его в определённой точке.

Позиционирование элемента на странице зависит от размеров экрана посетителя. Для того, чтобы элементы отображались так, как вы их позиционируете на экране в редакторе странице и не смещались на экранах пользователя, используйте разные позиции элемента по осям X и Y. Например, элементы, которые располагаются в левой части сайта, имеют позицию по оси X - слева. А элементы, которые располагаются в правой части сайта, имеют позицию по оси X - справа. Такое расположение элементов фиксирует их положение относительно границ сайта. Эти элементы будут отображаться на разных экранах пользователей одинаково ровно.

Изменение позиции элемента Справа-Слева и Верх-Низ необходимо для более тонкой настройки отображения элементов для разных размеров экрана пользователей.

Ширина экрана

Вы можете настроить ширину страницы:

  • Авто - это видимая часть сайта для всех размеров экрана.
  • Полная ширина - это максимально возможная ширина сайта. 

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

Если вы устанавливаете ширину экрана "полная ширина", то элементы, которые расположены по краям сайта будут смещаться за пределы видимой области у тех посетителей, кто имеет небольшой размер экрана.

Мы рекомендуем всегда использовать ширину "авто", чтобы все элементы на странице были видны вашим посетителям. 

Пиксели и проценты

Вы можете вносить значения позиции элемента вручную по осям X и Y. Возможно два варианта значения: пиксели и проценты. Вы можете использовать любой вариант, который вам больше подходит.

Пиксели. Вы выставляете количество пикселей по осям X и Y для того, чтобы выставлять элементы более точно на вашей странице относительно границ или других элементов. 

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

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

Чтобы переместить элемент используйте стрелочки на клавиатуре. Нажимая на стрелочку, вы перемещаете элемент на 1 пиксель. Таким образом вы можете более точно настроить расположение элемента на сайте относительно других элементов или границ. Если зажать клавишу "shift", то шаг перемещения станет 10 пикселей. Выделите объект, зажмите на клавиатуре "shift" и стрелочку "вверх-вниз", "вправо-влево". Элемент сместится на 10 пикселей в том направлении, которое вы выберите.

Проценты. Вы также можете указывать положение элемента в процентах. В поле X или Y введите цифру и знак процента "%". Элемент расположится по оси таким образом, что 100% - это полная ширина страницы, или полная высота страницы, а элемент располагается в соответствующей части страницы. Например, если мы ставим 50%, то элемент располагается ровно по середине ширины (или высоты) верхним левым углом (если отсчет идёт Слева).

Родительский элемент

Позиционирование элемента на странице происходит от границ родительского элемента - это элемент, внутри которого располагается другой элемент. Когда вы добавляете элементы текст, иконка, заголовок, изображение, то родительским документом является раздел страницы. Если вы группируете элементы или добавляете форму, то родительским документом будет не раздел, а группа и форма. Внутри группы будет несколько элементов и внутри формы располагаются несколько элементов (заголовок, текстовые поля. кнопка).

Выделите группу нажатием левой кнопки мышки, чтобы изменить элементы внутри родительского элемента. Вы можете их перемещать, переносить из родительского в другое место, копировать и удалять. Если родительский элемент не выделен, то перемещаться будет вся группа элементов (форма целиком).