Абсолютное позиционирование элементов в обычных блоках

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

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

Важно: применить абсолютное позиционирование можно к следующим элементам: заголовок, текст, изображение и кнопка. Также в настоящее время абсолютное позиционирование доступно не во всех блоках.Подсказка: если вы создаёте блок с нуля и хотите разместить там элементы с абсолютным позиционированием, мы рекомендуем воспользоваться специально для этого созданным Flex block. Подробнее о нём и управлении элементами с абсолютным позиционированием вы можете узнать в этой инструкции.Обратите внимание: вы можете узнать о том, как управлять расположением элементов друг над другом (z-индекс) в этом разделе инструкции о Flex block. А об выравнивании элементов в блоке по горизонтали и вертикали вы можете узнать в этом разделе инструкции.

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

Кроме использования специального Flex block, в котором все элементы имеют абсолютное позиционирование, можно применить абсолютное позиционирование к элементам, которые находятся в кастомном и некоторых других блоках. Для этого нажмите три точки в левом верхнем углу необходимого элемента и выберите пункт Сделать абсолютным:

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

Ниже выбранного изображения можно увидеть его размеры в пикселях.

Обратите внимание: на первом скриншоте кнопка "Learn more" была расположена снизу правой колонки, однако после того, как к изображению над ней применили абсолютное позиционирование, эта кнопка оказалась сверху колонки — то есть заняла место изображения. Таким образом, при активации абсолютного позиционирования элемент перестает занимать пространство в колонке блока и освобождает место для других елементов.Подсказка: если вы хотите оставить пустое пространство в колонке на месте, где раньше был элемент, вы можете добавить на его место элемент "Пустое пространство" с помощью этой инструкции.

Полезные подсказки:

Вы можете изменять размер изображения путём зажатия левой клавиши мыши на границе элемента и перетягивания указателя мыши к центру изображения (для его уменьшения) или от центра (для его увеличения);
Дважды нажмите на изображение, чтобы открыть его настройки;
При перемещении элемента от него к левому верхнему углу блока ведет пунктирная линия, помогающая понять к какому блоку принадлежит выбранный элемент;
Зажмите клавишу Shift и выберите левой клавишей мыши несколько элементов, чтобы перемещать их одновременно;
После применения абсолютного позиционирования к элементам необходимо открыть редактор мобильной и планшетной версии сайта и расположить там элементы нужным вам образом.
Вы можете перемещать элементы по 1 пикселю с помощью стрелочек на клавиатуре.
Абсолютное позиционирование элементов недоступно в блоках-коллекциях и ещё в некоторых блоках.

Возврат статического позиционирования элемента

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

Примечание: в Flex block элементы нельзя сделать статичными, поскольку Flex блок в себе не содержит колонок (сетки).

Таким образом, элемент будет размещен слева в верхнюю колонку блока, после чего этот элемент можно будет перемещать только в пределах колонок блока (в пределах сетки блока). К примеру, вот здесь этот уже статический элемент разместили в левой колонке:

Последнее изменение: 04/12/2023

Была ли эта статья полезна?

Спасибо!