Свойство относительной позиции, пожалуй, самое загадочное из всех типов позиций. Однако, как только мы поймем, как это работает, мы сможем использовать это в наших интересах при разработке макетов с Divi. В этом уроке вы узнаете много нового.
Действительно, в этом уроке мы обсудим:
- Обзор четырех типов позиционирования Divi
- Как относительное положение «позиционирует» элемент на Divi
- 4 причины, которые оправдывают использование относительной позиции на Divi
- Относительная позиция против маржи
- Относительная позиция по сравнению с Transformer Translate
Презентация четырех типов позиционирования Divi
Относительное положение - это один из четырех типов позиций, доступных в Divi. Вот краткий обзор каждого из них ниже.
Статический (по умолчанию)
Технически статические элементы не «позиционируются», потому что они остаются в обычном порядке или порядке элементов на странице, и они не реагируют на свойства top, right, bottom и left, как другие позиционированные элементы (т. Е. вот почему в Divi для элементов в статической позиции / позиции по умолчанию нет доступных смещений). В Divi, когда мы выбираем позицию по умолчанию для модуля, мы выбираем статическую позицию. Следует также отметить, что некоторые элементы Divi (например, строки и разделы) по умолчанию будут иметь относительное положение (не статическое).
относительный
Относительно расположенные элементы во многом похожи на статические элементы в том смысле, что они следуют обычному потоку страницы. Основное отличие состоит в том, что относительно позиционированные элементы можно позиционировать с помощью свойств top, bottom, left и right. Кроме того, в отличие от статических элементов, их также можно позиционировать с помощью свойства Z Index.
абсолютный
Абсолютно позиционированный элемент выходит из обычного потока документов, и поэтому на странице не создается фактического пространства для элемента. Мы можем думать об этом как о элементе, плавающем поверх других элементов на странице, которые занимают реальное пространство. Он будет расположен относительно ближайшего родительского контейнера.
фиксированный
Как и в случае с абсолютной позицией, элементы с фиксированной позицией выходят из нормального потока страницы и не имеют фактического пространства на странице. Основное различие между абсолютным и фиксированным состоит в том, что фиксированная позиция находится относительно окна или окна браузера. Другими словами, независимо от того, где элемент находится в обычном потоке страницы, после того, как ему была присвоена фиксированная позиция, его позиция теперь будет напрямую связана с окном браузера. Мы можем использовать свойства top, bottom, left и right для позиционирования элемента в окне. Поскольку фиксированные элементы часто нависают позади или перед другими элементами на странице, Z Index поможет расположить фиксированные элементы выше других.
ПРИМЕЧАНИЕ. В CSS есть еще один тип позиционирования, называемый липким. Прикрепленный позиционированный элемент ведет себя как относительно позиционированный элемент, пока мы не перейдем к его контейнеру (во время, определяемое верхним значением). Затем элемент фиксируется (или застревает) до тех пор, пока пользователь не прокрутит до конца контейнера. Однако липкое положение может быть немного непредсказуемым, поскольку другие факторы могут препятствовать работе. По этой причине в Divi опция залипания недоступна во встроенных опциях. Однако в Divi есть способы использовать "position: sticky".
Как относительная позиция «позиционирует» элемент на Divi
Как упоминалось в предварительном просмотре, тип относительного положения аналогичен статическому «положению», поскольку элемент остается в нормальном потоке документа. Настоящая разница в том, что после того, как мы присвоим элементу относительную позицию, у него теперь есть новые параметры, доступные для позиционирования элемента. Эти параметры включают свойства top, bottom, left и right, а также свойство Z Index.
В Divi эти дополнительные параметры положения можно найти в группе параметров положения после выбора относительного положения.
Использование смещений с относительным положением
Значения Origin Offset и Offset будут работать вместе, чтобы разместить наш элемент там, где мы хотим, в родительском контейнере. В этом примере у нас есть модуль, который имеет относительное положение, верхнее левое смещение, вертикальное смещение 25 пикселей и горизонтальное смещение 25 пикселей. Обратите внимание, как значения смещения будут перемещать элемент от начала смещения по горизонтали и / или вертикали.
Вот тот же модуль с теми же смещениями, но с источником смещения в правом верхнем углу.
Вот тот же модуль с теми же смещениями и источником смещения в правом нижнем углу.
А вот тот же модуль с теми же смещениями и источником смещения внизу слева.
Не удивительный интервал
При относительном позиционировании фактическое пространство элемента остается на своем исходном месте после перемещения элемента с использованием смещений (вверх, вниз, влево, вправо). Новое положение элемента не перемещается и не влияет на интервал между остальными элементами на странице. По сути, он парит над другими элементами, как дух, покинувший его тело.
Зачем использовать относительную позицию
Причина 1: сделать родительский контейнер для абсолютно позиционированных элементов
Это, вероятно, самое популярное приложение типа относительного положения. Поскольку любой элемент с абсолютным позиционированием находится относительно ближайшего позиционированного предка, мы можем сделать один из его предков позиционированным элементом, просто задав ему относительное положение (статическое положение по умолчанию не равно технически «позиционируется»). Это сохраняет поток документов на месте (например, статический) и позволяет нам выбирать контейнер для абсолютных элементов.
Причина 2: перемещать элементы, не затрагивая другие элементы на странице.
С относительным положением мы можем использовать смещения, чтобы подтолкнуть элементы к выравниванию, не затрагивая другие элементы. А с Divi мы можем воспользоваться преимуществами подвижного пользовательского интерфейса для визуального позиционирования элементов в реальном времени.
Причина 3: использовать индекс Z для перекрытия других элементов
По умолчанию статические элементы не могут быть переставлены по оси z, если им не задано относительное положение. Попав в относительное положение, элемент останется в обычном потоке документа. Только теперь у нас есть возможность воспользоваться Z-индексированием, чтобы разместить элементы в определенном порядке, когда они перекрываются.
Причина 4: Чтобы избежать использования отрицательной маржи для позиционирования
Относительное позиционирование оставит позади пространство исходного положения. Однако, с отрицательным запасом, содержание и его исходное пространство смещены. Например, если мы добавим отрицательное верхнее поле к строке в Divi, чтобы строка перекрывала строку над ней, все строки/ содержание будет двигаться вместе с ним. Это оставляет некоторый беспорядок, который нужно навести в порядок, которого можно было бы избежать, используя вместо этого смещения относительного положения.
Если мы зададим одному и тому же модулю относительное положение, мы можем использовать вертикальное смещение, чтобы поднять модуль, не затрагивая остальной интервал на странице.
Хотя я часто использовал отрицательные поля для позиционирования элементов в Divi, вероятно, не стоит использовать вместо этого относительное позиционирование. Поле относится к модулю блока элемента, поэтому на самом деле оно предназначено для добавления интервала внутри и вокруг самого элемента, а не столько для позиционирования смещения элемента от его родительского контейнера, сколько для относительное позиционирование.
Подводя итог
Очень вероятно, что в итоге вы многого не поняли. Возможно, самым удивительным аспектом использования относительного положения является его влияние (или влияние) на остальной дизайн страницы. Он не только работает в тандеме с абсолютными элементами, но также хорошо работает с переведенным преобразованием, чтобы расположить элементы в идеальном месте.
Источник: Элегантные темы
