Свободное позиционирование элементаров: относительное и абсолютное положение для любого элемента
Расширение Positioning в Master Addons бесплатно и добавляет панель Positioning на вкладку Advanced каждого виджета, столбца, раздела и контейнера.Выберите относительный или абсолютный, затем установите смещения Top, Right, Bottom и Left в px, em или %, с отдельными значениями для рабочего стола, планшета и телефона. Используйте его для значков, которые перекрывают фотографию, фигур, которые вырываются из раздела, или меток, подталкиваемых на место.
Относительное, абсолютное и статическое позиционирование
Выберите тип позиции, соответствующий заданию Относительный перемещает элемент из его нормального места без смещения соседей Абсолютный помещает его в точные смещения внутри ближайшего расположенного родителя Статический и по умолчанию поддерживают нормальный поток страницы Тип позиции может отличаться на устройство, поэтому элемент может перекрываться на рабочем столе и сидеть в потоке на телефоне.
- Относительное позиционирование: точное выравнивание, например смещение значка на несколько пикселей влево.
- Абсолютное позиционирование: размещайте значки, декоративные формы или этикетки в любом месте секции.
- Нужно что-то прикрепить к экрану, пока посетители прокручивают? используйте параметр "Фиксированная" в настройке "Положение" самого Elementor на виджетах и контейнерах.
Смещения со всех сторон, плюс из центра
Установите Top, Right, Bottom и Left в px, em или %, включая отрицательные значения, которые проталкивают элемент мимо края его родителя.Поместите значок “NEW” 10px сверху и 15px справа от карты продукта. опция From Center смещает элемент из горизонтального центра его родителя, что помогает с центрированными перекрывающимися эффектами.
- Четырехстороннее управление: задать расстояния от всех четырех ребер родителя.
- Из центра: позиция от середины родителя вместо левого края.
- Z-индекс на устройство: решите, какой элемент находится сверху, когда вещи перекрываются.
- Панель предупреждает вас не объединять Левый и От Центра на одном элементе.
Настройка положения Elementor против позиционирования главных дополнений
Оба бесплатны, и они решают немного разные задачи Используйте эту таблицу, чтобы выбрать правильную для элемента. для большего контроля макета, пара Позиционирование с Дополнительные контейнерыили добавьте движение с Преобразует (Про).
| Позиция Элементора | Мастер Аддоны Позиционирование | |
|---|---|---|
| Цена | Бесплатно | Бесплатно |
| Типы должностей | По умолчанию, Абсолютно, Исправлено | По умолчанию, Статический, Относительный, Абсолютный |
| Смещения | Один горизонтальный и один вертикальный | Сверху, справа, снизу, слева и из центра |
| Тип позиции на устройство | Нет | Да |
| Работает на | Виджеты и контейнеры | Виджеты, контейнеры, разделы и столбцы |
| Остается на экране во время прокрутки | Да, с Фиксированным | Нет |
Как перекрыть элементы в Elementor с помощью позиционирования
Этот пример помещает значок “Sale” над верхним правым углом изображения продукта. те же шаги работают для форм, значков и этикеток.
- Убедитесь, что расширение Positioning включено на панели управления Master Addons.
- Поместите изображение и виджет значка в один контейнер.
- Выберите контейнер, перейдите в "Дополнительно" > "Позиционирование" и установите "Тип позиции относительно".
- Выберите значок, установите для типа позиции значение "Абсолютный", затем установите значение "Верхний и правый" на 10px.
- Установите Z-индекс значка на 2, чтобы он оставался над изображением.
- Переключитесь на просмотр планшета и мобильного телефона и настройте смещения для каждого экрана.
Хотите, чтобы на всю карту можно было щелкнуть? Добавить Обертка Ссылка в контейнер За все, что не покрывает панель, пишите свои правила Пользовательские CSS.
Часто задаваемые вопросы для позиционирования
Чем это отличается от собственного параметра "Позиция" Элементора?
Настройка "Положение" Elementor на виджетах и контейнерах предлагает функцию "По умолчанию, абсолютное и фиксированное" с одним горизонтальным и одним вертикальным смещением. Расширение Master Addons добавляет относительную и статическую, позволяет установить все четыре стороны, добавляет смещение от центра, позволяет менять тип положения на устройство, а также работает с классическими разделами и столбцами. В него не входит исправлено, поэтому используйте настройку Elementor для элементов, которые должны оставаться на экране во время прокрутки.
Когда я использую Абсолютное позиционирование, к чему оно относится "относительно"?
Абсолютно расположенный элемент помещается внутри ближайшего родителя, положение которого не статично Если ни у одного родителя нет набора позиций, смещения измеряются от родителя дальше по странице, и элемент может оказаться где-то неожиданным Чтобы избежать этого, выберите контейнер или столбец, который удерживает элемент, и установите его Тип положения на Относительный первым.
Будет ли это работать правильно на мобильных устройствах и планшетах?
Да. тип позиции, все четыре смещения, от центра и Z-Index каждый принимает отдельные значения для рабочего стола, планшета и мобильного. элемент, помещенный 100px слева на рабочем столе, может упасть с экрана телефона, поэтому переключитесь на планшет и мобильные представления и настройте номера там. Вы также можете установить тип позиции в Статический на мобильном, чтобы вернуть элемент в обычную раскладку.
Могу ли я использовать это, чтобы сделать секцию уникальной формы или вырваться из контейнера?
Да. установите контейнер в Относительный, поместите изображение или форму внутри него, установите этот элемент в Абсолютный и дайте ему отрицательное смещение, такое как Левый: -50px. Элемент нависает над краем контейнера, так строится большинство перекрывающихся дизайнов героев и карт.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
