Summary  
This chapter covers CSS relative positioning, demonstrating how to visually offset an element from its original location using top, bottom, left, and right properties without affecting the layout of surrounding elements.

General domain of usage  
Web development

**Відносне позиціонування** дозволяє розміщувати елемент візуально відносно його початкового положення. При цьому сусідні елементи не займають місце цього елемента.
```css
position: relative;
```

Можна використовувати властивості `top`, `left`, `bottom` і `right` для вказівки візуального зміщення елемента відносно його початкової позиції. Значення можуть бути як додатними, так і від’ємними, у різних одиницях виміру (`px`, `%` тощо). Розглянемо наступний приклад, щоб побачити, який ефект можна отримати:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZvbHVwdGF0ZW0gZW9zCiAgICAgICAgZXQgbWF4aW1lIG9mZmljaWlzLCBtb2xlc3RpYWUgYXV0ZW0gZWEgY29ycG9yaXMgdW5kZSBxdWlidXNkYW0gbmloaWwKICAgICAgICBpcHNhbSBmYWNlcmUgY29ycnVwdGksIGludmVudG9yZSB2b2x1cHRhdGUgY29uc2VxdWF0dXIgbGFib3Jpb3NhbSBvcHRpbwogICAgICAgIG1hZ25hbSBvZGlvLgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iY2FyZCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXRlbSBlb3MKICAgICAgICBldCBtYXhpbWUgb2ZmaWNpaXMsIG1vbGVzdGlhZSBhdXRlbSBlYSBjb3Jwb3JpcyB1bmRlIHF1aWJ1c2RhbSBuaWhpbAogICAgICAgIGlwc2FtIGZhY2VyZSBjb3JydXB0aSwgaW52ZW50b3JlIHZvbHVwdGF0ZSBjb25zZXF1YXR1ciBsYWJvcmlvc2FtIG9wdGlvCiAgICAgICAgbWFnbmFtIG9kaW8uCiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJjYXJkIj4KICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBWb2x1cHRhdGVtIGVvcwogICAgICAgIGV0IG1heGltZSBvZmZpY2lpcywgbW9sZXN0aWFlIGF1dGVtIGVhIGNvcnBvcmlzIHVuZGUgcXVpYnVzZGFtIG5paGlsCiAgICAgICAgaXBzYW0gZmFjZXJlIGNvcnJ1cHRpLCBpbnZlbnRvcmUgdm9sdXB0YXRlIGNvbnNlcXVhdHVyIGxhYm9yaW9zYW0gb3B0aW8KICAgICAgICBtYWduYW0gb2Rpby4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5jYXJkOm50aC1jaGlsZCgybikgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICB0b3A6IDMwcHg7CiAgbGVmdDogNTBweDsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7Cn0KCi5jYXJkIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIG1hcmdpbjogMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB5ZWxsb3c7Cn0=

> Примітка
>
> Важливо зазначити, що немає необхідності вказувати всі властивості `top`, `bottom`, `left` та `right` для елемента зі значенням position, відмінним від `static`. Достатньо встановити одну властивість для вертикального позиціонування (`top` або `bottom`) і одну для горизонтального позиціонування (`left` або `right`).

Що робить властивість `position: relative`?

Підвищуйте свої навички стилізації, опановуючи сучасні техніки CSS для вебдизайну. Розміщуйте та керуйте елементами з точністю за допомогою розширених стратегій позиціонування. Створюйте плавні переходи та захоплюючі анімації для покращення взаємодії з користувачем. Трансформуйте та змінюйте елементи для динамічних візуальних ефектів. Створюйте адаптивні дизайни для різних пристроїв і оптимізуйте робочий процес за допомогою CSS-препроцесорів, таких як Sass.

Дослідження очікувань слухачів від цього курсу з розширеного стилювання HTML та CSS. Необхідні попередні знання перед початком курсу. Теми, які будуть розглянуті у курсі.

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

Дослідження можливостей переходів та вивчення способів покращення взаємодії з користувачем. Ознайомлення з методами плавної та поступової анімації властивостей для забезпечення непомітних змін стану.

Дізнайтеся про властивість animation та її використання для створення динамічних і привабливих дизайнів. Ознайомтеся зі створенням складних анімацій за допомогою keyframes і керуванням анімацією.

Дослідження властивості transform, яка дозволяє змінювати вигляд і розташування елементів на вебсторінці. Вивчення масштабування, обертання, перекошування та переміщення елементів у двох- і тривимірному просторі. Комбінування кількох трансформацій для створення складніших ефектів.

Принципи та методи, що використовуються в адаптивному та респонсивному дизайні, спрямовані на забезпечення доступності та візуальної привабливості вебсайтів і застосунків на різних пристроях, розмірах екранів і орієнтаціях.

Дізнайтеся про препроцесори в CSS та їхню роль у написанні більш ефективного й підтримуваного коду. Ознайомтеся з використанням препроцесорів для спрощення робочого процесу та створення чистішого CSS-коду.

Пояснення Відносного Позиціонування