Понимание и использование относительной позиции в Divi

Свойство относительного положения, пожалуй, самый загадочный из типов положения. Однако, как только мы поймем, как это работает, мы сможем использовать это в наших интересах при разработке сайта в Divi. То, что мы обнаружим, может вас удивить.

В этом посте мы рассмотрим:

• Обзор четырех типов позиционирования Divi
• Как относительное положение «позиционирует» элемент в Divi
• 5 причин использовать относительную позицию в Divi
• Относительная позиция против маржи
• Относительное положение и преобразование Переводчик

Проверьте это!

Обзор четырех типов позиционирования Divi

Относительное положение - это один из четырех типов положения, доступных в Divi. Вот краткий обзор каждого из них ниже.

Статический (по умолчанию)

Статические элементы технически не «позиционируются», поскольку они остаются в нормальном порядке или порядке элементов на странице, и они не реагируют на свойства top, right, bottom и left, как другие позиционированные элементы (вот почему нет смещения доступны в Divi для элементов в статической позиции / позиции по умолчанию). В Divi, когда мы выбираем позицию по умолчанию для модуля, мы выбираем статическую позицию. Также стоит упомянуть, что некоторые элементы в Divi (например, строки и разделы) по умолчанию будут иметь относительное положение (а не статическое положение).

Родственник

Относительно расположенные элементы похожи на статические элементы в том смысле, что они следуют обычному потоку страницы. Основное отличие состоит в том, что относительно позиционированные элементы можно позиционировать с помощью свойств top, bottom, left и right. Кроме того, в отличие от статических элементов, их также можно позиционировать с помощью свойства Z Index.

Абсолютный

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

Фиксированный

Как и в случае с абсолютным положением, элементы с фиксированным положением вырвутся из обычного потока страницы и не будут иметь фактического пространства внутри страницы. Ключевое различие между абсолютным и фиксированным состоит в том, что фиксированная позиция определяется по отношению к окну браузера или области просмотра. Другими словами, независимо от того, где элемент находится в обычном потоке страницы, как только ему будет присвоена фиксированная позиция, его позиция теперь будет напрямую связана с окном браузера. Мы можем использовать свойства top, bottom, left и right для позиционирования элемента в области просмотра. Поскольку фиксированные элементы часто будут находиться позади или перед другими элементами на странице, Z Index поможет упорядочить фиксированные элементы над другими.

ПРИМЕЧАНИЕ. В CSS есть еще один тип позиционирования, называемый липким. Плавно позиционированный элемент ведет себя как относительно позиционированный элемент, пока мы не перейдем к его контейнеру (в какой-то момент, определяемый верхним значением). Затем элемент становится фиксированным (или застревает), пока пользователь не прокрутит до конца контейнера. Однако липкое положение может быть немного непредсказуемым, поскольку другие факторы могут препятствовать работе. По этой причине в Divi опция залипания недоступна среди встроенных опций. Однако есть способы использовать «position: sticky» в Divi.

Как относительное положение «позиционирует» элемент в Divi

Как упоминалось в обзоре, тип относительной позиции аналогичен статической «позиции», поскольку элемент остается в обычном потоке документа (HTML на странице). Настоящая разница в том, что после того, как мы присвоим элементу относительное положение, теперь у него появятся новые параметры, доступные для позиционирования элемента. Эти параметры включают свойства top, bottom, left и right, а также свойство Z Index.

В Divi эти дополнительные параметры положения можно найти в группе параметров положения после выбора относительного положения.

Использование смещений с относительной позицией

Значения Offset Origin и Offset будут работать вместе, чтобы разместить наш элемент в любом месте родительского контейнера. В этом примере у нас есть модуль, который имеет относительное положение, смещение в верхнем левом углу, вертикальное смещение 25 пикселей и горизонтальное смещение 25 пикселей. Обратите внимание, как значения смещения будут перемещать элемент от начала смещения по горизонтали и / или вертикали.

Вот тот же модуль с такими же смещениями, но с началом смещения вверху справа.

Вот тот же модуль с такими же смещениями и исходной точкой смещения справа внизу.

А вот тот же модуль с такими же смещениями и исходной точкой смещения в левом нижнем углу.

Никаких сюрпризов

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

Причины использовать относительную позицию

# 1 для рендеринга родительского контейнера для абсолютно позиционированных элементов

Это, наверное, самое популярное приложение типа относительного положения. Поскольку любой абсолютно позиционированный элемент относится к ближайшему позиционированному предку, мы можем сделать один из его предков позиционированным элементом, просто задав ему относительное положение (статическое положение по умолчанию технически не «позиционируется»). Это сохраняет поток документов на месте (например, статический) и позволяет нам выбирать контейнер для абсолютных элементов.

# 2 Чтобы перемещать элементы, не затрагивая другие элементы на странице.

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

# 3 Использование индекса Z для перекрытия других элементов

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

# 4 Избегайте использования отрицательной маржи для целей позиционирования

Относительное позиционирование оставит после себя исходное положение. Однако при отрицательном поле перемещается и содержимое, и его исходное пространство. Например, если мы добавим отрицательное верхнее поле к строке в Divi, чтобы строка перекрывала строку над ней, все строки / содержимое переместятся вместе с ней вверх. Это оставляет небольшой беспорядок, которого можно было бы избежать, используя вместо этого смещения относительного положения.

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

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

Хотя я часто использовал отрицательное поле для позиционирования элементов в Divi, вероятно, не стоит использовать вместо этого относительное позиционирование. Margin относится к модулю блока элемента, поэтому на самом деле оно предназначено для добавления интервала внутри и вокруг самого элемента, а не столько для позиционирования смещения элемента от его родительского контейнера, как при относительном позиционировании.

Относительное положение и преобразование Перевести

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

Переводчик лучше подходит для анимации и переходов (например, для эффектов наведения)

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

Единицы относительной длины реагируют по-разному

Если мы используем единицы относительной длины (например,% или vw) для адаптивного дизайна, они будут работать по-разному с относительным положением и преобразованием translate.

Модуль Divi с относительным положением и горизонтальным смещением 50% будет перемещать модуль по горизонтали на величину, равную 50% ширины родительского контейнера (или столбца).

Модуль Divi с преобразованием translate (ось X) на 50% будет перемещать модуль по горизонтали на величину, равную 50% ширины самого модуля.

Комбинирование относительного положения и преобразования Перевести в центральные элементы

Как мы только что рассмотрели, относительное положение относится к родительскому элементу, а свойство transform translate относится к самому элементу. Из-за этого мы можем использовать оба в комбинации для позиционирования элементов так, как мы хотим. Мы даже можем использовать эту технику для центрирования элементов в их контейнере.

Например, мы можем использовать смещение относительного положения по горизонтали, чтобы расположить модуль вправо ровно на 50% ширины столбца.

Затем используйте свойство translate, чтобы переместить модуль на 50% (ширины модуля) влево. Это гарантирует, что модуль останется в центре столбца независимо от ширины модуля.

Последние мысли

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

Каков ваш опыт работы с относительным типом позиции?

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!