> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

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

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

||| ${color}[#f97700](Важливо:) застосувати абсолютне позиціонування можна до таких елементів: заголовок, текст, зображення та кнопка. Також нині абсолютне позиціонування доступне не у всіх блоках.
| ${color}[#1aa900](Підказка:) якщо ви створюєте блок з нуля і бажаєте розмістити там елементи з абсолютним позиціонуванням, ми радимо скористатися спеціально для цього створеним Flex блоком. Детальніше про нього та керування елементами з абсолютним позиціонуванням [ви можете дізнатися у цій інструкції](/uk/article/dodavannya-flex-block-dlya-vilnogo-roztashuvannya-elementiv-14n7ad8/).
|| ${color}[#ffa800](Зверніть увагу:) ви можете дізнатися про те, як керувати розташуванням елементів один над одним (z-індекс) [у цьому розділі інструкції про Flex block](/uk/article/dodavannya-flex-block-dlya-vilnogo-roztashuvannya-elementiv-14n7ad8/#1-keruvannya-roztashuvannyam-elementiv-odin-nad-odnim-z-indeks). А про вирівнювання елементів у блоці по горизонталі та вертикалі [ви можете дізнатися у цьому розділі інструкції](/uk/article/dodavannya-flex-block-dlya-vilnogo-roztashuvannya-elementiv-14n7ad8/#1-virivnyuvannya-elementiv-u-bloci).

# Увімкнення абсолютного позиціонування для елементу
Окрім використання спеціального Flex block, у якому усі елементи мають абсолютне позиціонування, ви можете застосувати абсолютне позиціонування до елементів, які знаходяться у кастомному та низці інших блоків. Для цього натисніть на три крапки у лівому верхньому куті необхідного елементу та оберіть пункт **Зробити абсолютним**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-1_12snx13.png)

Після цього елемент буде відв'язано від сітки блоку і ви зможете розмістити його довільним чином, наприклад, над іншим елементом. У цьому прикладі для одного зображення активували абсолютне позиціонування та розмістили його над іншим статичним зображенням:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-2_1hnmhhi.png)
Нижче вибраного зображення ви можете бачити його розміри у пікселях.

|| ${color}[#ffa800](Зверніть увагу:) на першому скриншоті кнопка "Learn more" розміщувалася знизу правої колонки, проте після того, як до зображення над нею застосували абсолютне позиціонування, ця кнопка опинилася зверху колонки — тобто зайняла місце зображення. Таким чином під час активації абсолютного позиціонування елемент перестає займати простір у колонці блоку та звільняє місце для інших елементів.
| ${color}[#1aa900](Підказка:) якщо ви хочете залишити порожній простір у колонці на місці, де раніше був елемент, ви можете додати на його місце [елемент "Пустий простір" за допомогою цієї інструкції](/uk/article/dodavannya-elementu-pustij-prostir-1x3kzrq/).

### Корисні підказки:
* Ви можете змінювати розмір зображення шляхом затиску лівої клавіші миші на границі елементу;
* Двічі клацніть на зображення, щоб відкрити [його налаштування](/uk/article/redaguvannya-zobrazhen-1x7wx8g/);
* Під час переміщення елемента з абсолютним позиціонуванням до лівого верхнього кута блоку веде пунктирна лінія, яка допомагає зрозуміти до якого блоку належить обраний елемент;
* Затисність клавішу Shift та оберіть лівою клавішою миші декілька елементів з абсолютним позиціонуванням, щоб переміщувати їх одночасно;
* Після застосування абсолютного позиціонування до елементів необхідно відкрити [редактор мобільної та планшетної версії сайту](/uk/article/redaguvannya-mobilnoyi-versiyi-sajtu-ablrxd/) та розташувати також там елементи потрібним вам чином.
* Ви можете переміщувати елементи по 1 пікселю за допомогою стрілочок на клавіатурі.
* Абсолютне позиціонування елементів недоступне у [блоках-колекціях](/uk/article/nalashtuvannya-elementiv-kolekciyi-4wu8qn/) та ще у деяких блоках.

# Повернення статичного позиціонування елементу
Якщо ви застосували абсолютне позиціонування до елементу, ви можете повернути для нього статичне (звичайне) позиціонування, щоб цей елемент розташовувався у межах колонок та сітки блоку. Для цього наведіть на елемент, натисніть на три крапки та у випадному меню оберіть опцію **Зробити статичним**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-7_1v7oon8.png)

|| ${color}[#ffa800](Примітка:) у Flex block елементи не можна зробити статичними, оскільки Flex block у собі не містить колонок (сітки).

Таким чином елемент буде розміщено зліва у найвищу колонку в блоці, після чого цей елемент можна буде переміщувати лише у межах колонок блоку (у межах сітки блоку). Наприклад, ось тут цей вже статичний елемент розмістили у лівій колонці: 
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-8_pz5hyk.png)