Руководство по пониманию и использованию абсолютной позиции Divi

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

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

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

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

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

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

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

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

Родственник

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

Абсолютный

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

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

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

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

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

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

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

Преимущества и недостатки использования абсолютной позиции в Divi

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

Преимущества

Вот несколько преимуществ использования абсолютного положения по сравнению с другими свойствами позиционирования, такими как Transform Translate или Margins:

Хороший инструмент дизайна

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

Хорошая альтернатива Float и Margins

С абсолютным положением вам не нужно полагаться на плавающие элементы или использовать поля для выполнения аналогичного позиционирования. Хотя это не встроенная опция в Divi, те, кто знаком с CSS, знают, что вы можете использовать float для позиционирования элементов вправо или влево, что в некоторых случаях может быть немного ошибочным и непредсказуемым. То же самое касается использования полей для позиционирования элементов. Иногда трудно предсказать точные значения полей, чтобы правильно расположить элемент, не оставляя ненужных интервалов. Использование абсолютного положения может быть хорошей альтернативой «точного позиционирования» как для поплавков, так и для полей.

Хорошая поддержка браузера

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

Недостатки

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

Риск изоляции

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

Менее отзывчивый

Также из-за того, что абсолютно позиционированные элементы выходят из потока документов, может быть трудно сделать позиционирование адаптивным для мобильных устройств. Фактически, многие разработчики избегают position: absolute из-за проблем, связанных с адаптивным дизайном. Поэтому при необходимости важно использовать единицы относительной длины (например, vw или%) вместо единиц абсолютной длины (например, px).

Использование точек местоположения с абсолютным положением

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

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

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

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

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

Внесение корректировок в центрированные абсолютные элементы

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

Вот как выглядит CSS в бэкэнде.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Верх: 50% предназначен для размещения верха элемента точно на 50% от верха его контейнера. Преобразование: translateY (-50%) предназначено для перемещения элемента вверх ровно на половину его собственной высоты. Это дает вам идеально расположенный элемент независимо от высоты.

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

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

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

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

Если я передал элементу преобразование, как показано ниже, ничего не изменится:

• Transform Translate (Y): -50%
• Transform Translate (X): -50%

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

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

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

Пример использования: абсолютное позиционирование кнопок для размытия одинаковой высоты

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

Вот как это сделать.

Сначала добавьте в раздел строку из одного столбца.

Затем добавьте в столбец модуль аннотации.

Затем добавьте модуль кнопки под модулем рекламного сообщения.

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

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

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

Используя множественный выбор, выберите каждый из модулей кнопок и обновите следующие настройки элементов для каждой из кнопок:

• Позиция: Абсолютная
• Расположение: внизу слева

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

• Отступ: 50 пикселей снизу

Теперь у вас есть три избранных элемента с одинаковым расположением кнопок для каждого, даже если объем контента (или высота рекламного объявления) может измениться.

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

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

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

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