Ця стаття також доступна на:

Абсолютне позиціонування елементів у звичайних блоках

Абсолютне позиціонування — це властивість елемента, яка дозволяє його розмістити у довільному місці в межах блоку, а не лише у межах структури (сітки), яка передбачена цим блоком.

За замовчуванням усі елементи на Weblium розміщені послідовно в колонках блока, наприклад, в одній колонці можуть бути розміщені заголовок, зображення та кнопка, й ці елементи мають певні відступи між собою. За допомогою абсолютного позиціонування ви можете зробити так, щоб елементи були розташовані поза колонкою і щоб одні елементи накладалися на інші тощо — це дозволяє реалізувати низку креативних дизайнерських ідей або розмістити елементи нетиповим чином.

Важливо: застосувати абсолютне позиціонування можна до таких елементів: заголовок, текст, зображення та кнопка. Також нині абсолютне позиціонування доступне не у всіх блоках.Підказка: якщо ви створюєте блок з нуля і бажаєте розмістити там елементи з абсолютним позиціонуванням, ми радимо скористатися спеціально для цього створеним Flex блоком. Детальніше про нього та керування елементами з абсолютним позиціонуванням ви можете дізнатися у цій інструкції.Зверніть увагу: ви можете дізнатися про те, як керувати розташуванням елементів один над одним (z-індекс) у цьому розділі інструкції про Flex block. А про вирівнювання елементів у блоці по горизонталі та вертикалі ви можете дізнатися у цьому розділі інструкції.

Увімкнення абсолютного позиціонування для елементу

Окрім використання спеціального Flex block, у якому усі елементи мають абсолютне позиціонування, ви можете застосувати абсолютне позиціонування до елементів, які знаходяться у кастомному та низці інших блоків. Для цього натисніть на три крапки у лівому верхньому куті необхідного елементу та оберіть пункт Зробити абсолютним:

Після цього елемент буде відв'язано від сітки блоку і ви зможете розмістити його довільним чином, наприклад, над іншим елементом. У цьому прикладі для одного зображення активували абсолютне позиціонування та розмістили його над іншим статичним зображенням:

Нижче вибраного зображення ви можете бачити його розміри у пікселях.

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

Корисні підказки:

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

Повернення статичного позиціонування елементу

Якщо ви застосували абсолютне позиціонування до елементу, ви можете повернути для нього статичне (звичайне) позиціонування, щоб цей елемент розташовувався у межах колонок та сітки блоку. Для цього наведіть на елемент, натисніть на три крапки та у випадному меню оберіть опцію Зробити статичним:

Примітка: у Flex block елементи не можна зробити статичними, оскільки Flex block у собі не містить колонок (сітки).

Таким чином елемент буде розміщено зліва у найвищу колонку в блоці, після чого цей елемент можна буде переміщувати лише у межах колонок блоку (у межах сітки блоку). Наприклад, ось тут цей вже статичний елемент розмістили у лівій колонці:

Оновлено: 04/12/2023

Чи була ця стаття корисною?

Дякуємо!