Назад Вперед Зміст

Позиціонування елементів у HTML/CSS

Детальна методичка з прикладами та інтерактивними демо

Static
Relative
Absolute
Fixed
Sticky
Порівняння
Інтерактивне демо

Static позиціонування

Static - це значення за замовчуванням для всіх HTML-елементів. Елемент розташовується відповідно до нормального потоку документа.

Приклад Static позиціонування:

Static
Елемент 2
Елемент 3

Примітка: Властивості top, left, right, bottom не впливають на static-елементи

.static-element {
  position: static;
  left: 50px; /* Не працює! */
  top: 50px; /* Не працює! */
}

Коли використовувати:

  • Для елементів у нормальному потоці
  • Коли не потрібне спеціальне позиціонування
  • Для скидання інших значень position

Обмеження:

  • Не можна зміщувати (top, left не працюють)
  • Не можна накладати елементи
  • z-index не працює

Relative позиціонування

Relative - елемент розташовується відносно свого нормального положення. Можна зміщувати за допомогою top, left, right, bottom.

Приклад Relative позиціонування:

Елемент 1
Relative
Елемент 3

Елемент зміщений на 60px праворуч і 30px вниз від свого початкового положення

.relative-element {
  position: relative;
  left: 60px;
  top: 30px;
  z-index: 1; /* Працює! */
}

Важливі моменти:

Absolute позиціонування

Absolute - елемент вилучається з нормального потоку і позиціонується відносно найближчого позиціонованого предка.

Приклад Absolute позиціонування:

Елемент 1
Absolute
Елемент 3

Елемент розташований у правому нижньому куті контейнера (який має position: relative)

.container {
  position: relative; /* Контекст для absolute */
}

.absolute-element {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 100px;
  height: 100px;
}

Використання:

  • Вспливаючі вікна (popups)
  • Іконки на картинках
  • Налаштування позицій всередині контейнерів
  • Створення складних макетів

Увага:

  • Елемент вилучається з потоку
  • Може перекривати інші елементи
  • Потрібен позиціонований предок
  • Може зламати адаптивність

Fixed позиціонування

Fixed - елемент позиціонується відносно вікна браузера. Залишається на одному місці при прокрутці.

Приклад Fixed позиціонування:

Прокрутіть вниз, щоб побачити fixed-елемент...

Fixed

Елемент залишається на одному місці при прокрутці!

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Типове застосування:

Sticky позиціонування

Sticky - гібрид relative та fixed. Елемент поводиться як relative, доки не досягне певної позиції при прокрутці, потім стає fixed.

Приклад Sticky позиціонування:

Елемент 1
Sticky (прилипає при top: 10px)
Елемент 3
Елемент 4
Елемент 5
.sticky-menu {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  padding: 1rem;
  border-bottom: 2px solid #eee;
}

Переваги sticky:

Обмеження:

Sticky не працює, якщо батьківський елемент має overflow: hidden, scroll, або auto. Також потрібна підтримка браузера (не працює в IE).

Порівняльна таблиця

Тип позиціонування Поведінка Відносно чого У потоці z-index Типове використання
Static Нормальний потік Не застосовується Так Ні Елементи за замовчуванням
Relative Зміщений від нормального положення Власного початкового положення Так (залишає порожній простір) Так Невеликі зміщення, контекст для absolute
Absolute Вилучений з потоку Найближчого позиціонованого предка Ні Так Спливаючі вікна, іконки, точне позиціонування
Fixed Вилучений з потоку Вікна браузера (viewport) Ні Так Фіксовані заголовки, кнопки, сповіщення
Sticky Гібрид relative/fixed Найближчого предка з прокруткою Так (доки не стає fixed) Так Липкі меню, заголовки таблиць, навігація

Практичні поради:

Добре:

  • Використовуйте relative для створення контексту
  • Обмежуйте absolute всередині контейнерів
  • Використовуйте sticky замість fixed, коли можливо
  • Завжди вказуйте z-index при накладанні

Погано:

  • Зловживання absolute для макетів
  • Fixed без обмеження висоти
  • Sticky без перевірки підтримки
  • Забувати про адаптивність

Інтерактивне демо

Спробуйте різні типи позиціонування та їх властивості:

0px
0px
Демо
Елемент 2
Елемент 3
#demoElement {
  position: static;
  top: 0px;
  left: 0px;
  z-index: 1;
}

Інструкція:

  1. Виберіть тип позиціонування з випадаючого списку
  2. Змінюйте значення top та left за допомогою повзунків
  3. Спробуйте різні значення z-index
  4. Перетягніть демо-елемент мишею
  5. Спостерігайте за змінами CSS коду в реальному часі

ПРАКТИЧНА РОБОТА № 13
Позиціонування елементів

Варіант 1

Створіть HTML-сторінку, яка відображає вірш «Жираф» Миколи Гумільова (в англійському перекладі Дмитра Оболенського). Сторінка повинна бути стилізована відповідно до наведених вимог.

Вихідні матеріали

Вимоги до оформлення

  1. Загальна структура:
    • Сторінка повинна мати центрований контейнер із вертикальною прокруткою.
    • Контейнер має ширину приблизно 850px (або 95% ширини екрана), висоту 85vh, заокруглені кути та тінь.
    • Фон контейнера — колір #f5f0ff, а також фонове зображення giraffe.png, яке повторюється вертикально (repeat-y) і вирівнюється по правому краю.
  2. Заголовок першого рівня:
    • Має бути «липким» (sticky): при прокручуванні контейнера він залишається у верхній частині.
    • Колір тексту — #4a2d7a.
    • Шрифт — Arial, розмір 46pt.
    • Тінь тексту: 2px 2px 4px #aaa.
    • Напівпрозорий білий фон, нижня межа 3px solid #6a5acd, заокруглені нижні кути, легка тінь блоку.
  3. Картки-куплети:
    • Шрифт тексту — Times New Roman, розмір 16pt, курсив, напівжирний (600).
    • Внутрішні відступи — 20px.
    • Рамка товщиною 8px, стиль — суцільна, заокруглені кути.
    • Кожен куплет має власний колір фону, рамки та тексту (наприклад: перший — світло-зелений фон, темно-зелена рамка; другий — світло-жовтий, червона рамка; третій — світло-блакитний, бірюзова рамка; четвертий — світло-бузковий, пурпурова рамка).
    • Куплети розташовані каскадом з невеликими зміщеннями праворуч та вниз (відносне позиціонування з використанням top і left).
    • Застосуйте тінь (box-shadow) та ефект легкого збільшення при наведенні.
  4. Декоративні орнаменти:
    • Зображення triskell.png розміщено по чотирьох кутах контейнера (розмір 80×80 px).
    • Кутові орнаменти повернуті за допомогою transform: rotate(...) для симетрії.
  5. Підпис перекладача:
    • Розташований під заголовком або в окремому рядку, курсив, сірий колір.
  6. Адаптивність:
    • При ширині екрана менше 768px:
      • Контейнер займає всю ширину та висоту вікна.
      • Заголовок зменшується до 28pt.
      • Всі куплети стають у звичайному потоці (relative без зміщень), ширина 90%, відступи зменшуються.
      • Декоративні орнаменти зменшуються до 50×50 px.
      • Підпис перекладача центрується.

Текст вірша (англійською)

Today I see your look is especially sad, And your arms are especially thin, embracing your knees. Listen: far, far away on Lake Chad An exquisite giraffe wanders. He has been granted graceful ease and slenderness, And his hide is adorned with a magic pattern, With which only the Moon dares to compare, Shattering and swaying on the moisture of broad lakes. In the distance he is like the colored sails of a ship, And his run is smooth, like a joyful bird's flight. I know that the earth sees many wonderful things, When at sunset he hides in a marble grotto. I know the merry tales of mysterious lands About a black maiden, about the passion of a young chief, But you have breathed in the heavy fog for too long, And how shall I tell you about the tropical garden, About the slender palm trees, about the smell of unimaginable herbs... — Are you crying? Listen... far away on Lake Chad An exquisite giraffe wanders.
Примітка: За бажанням можна використати будь-який інший поетичний текст, але умови залишаються тими самими.
Результат

Збережіть файл як giraffe.html та перевірте його в браузері на комп’ютері та на мобільному пристрої (або в режимі емуляції). Переконайтеся, що sticky-заголовок працює, куплети розташовані каскадом, а на мобільному вигляд адаптивний.

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

Варіант 2

Створіть HTML-сторінку, яка відображає вірш Лесі Українки «Contra spem spero». Сторінка повинна бути стилізована відповідно до наведених вимог.

Вихідні матеріали

Вимоги до оформлення

  1. Загальна структура:
    • Сторінка використовує CSS Grid для розміщення основного контенту.
    • Основний контейнер має дві колонки: ліва (ширина 30%) — для заголовка і підпису, права (70%) — для куплетів.
    • Фон сторінки — колір #FDF5E6 (old lace), а також фонове зображення flower.png, яке повторюється по горизонталі та вертикалі (repeat).
  2. Заголовок першого рівня:
    • Розташований у лівій колонці, закріплений (fixed) відносно вікна перегляду.
    • Колір тексту — #B22222 (вогняно-червоний).
    • Шрифт — Georgia, розмір 36pt, курсив.
    • Тінь тексту: 4px 4px 6px #555.
    • Фон — напівпрозорий білий (rgba(255,255,255,0.7)), заокруглені кути, легка тінь блоку.
  3. Картки-куплети:
    • Розташовані у правій колонці у вигляді гнучкого контейнера (flex), що обгортає елементи.
    • Кожен куплет має ширину 45% від контейнера, зовнішній відступ 15px.
    • Шрифт тексту — Verdana, розмір 14pt, звичайний (не курсив).
    • Внутрішні відступи — 15px.
    • Рамка товщиною 3px, стиль — пунктирна (dashed), заокруглені кути 10px.
    • Кожен куплет має власний колір фону та рамки (наприклад: перший — світло-рожевий з червоною рамкою, другий — світло-блакитний з синьою рамкою, третій — світло-жовтий з оранжевою рамкою, четвертий — світло-зелений з темно-зеленою рамкою).
    • Застосуйте тінь та ефект підйому при наведенні.
  4. Декоративні орнаменти:
    • Зображення decor.png розташоване у верхньому лівому та нижньому правому кутах сторінки (розмір 100×100 px).
    • Кутові орнаменти не повертаються.
  5. Підпис автора:
    • Розташований під заголовком у лівій колонці, курсив, сірий колір.
  6. Адаптивність:
    • При ширині екрана менше 768px:
      • Grid змінюється на одну колонку.
      • Заголовок перестає бути fixed, стає статичним зверху сторінки.
      • Куплети займають 100% ширини, зовнішні відступи зменшуються.
      • Декоративні орнаменти зменшуються до 60×60 px.

Текст вірша

Contra spem spero! Гетьте, думи, ви хмари осінні! То ж тепера весна золота! Чи то так у жалю, в голосінні Проминуть молодії літа? Ні, я хочу крізь сльози сміятись, Серед лиха співати пісні, Без надії таки сподіватись, Жити хочу! Геть, думи сумні! Я на вбогім сумнім перелозі Буду сіять барвисті квітки, Буду сіять квітки на морозі, Буду лить на них сльози гіркі. І від сліз тих гарячих розтане Та кора льодовая, міцна, Може, квіти зійдуть — і настане Ще й для мене весела весна. Я на гору круту крем'яную Буду камінь важкий підіймать І, несучи вагу ту страшную, Буду пісню веселу співать. В довгу, темную нічку невидну Не стулю ні на хвильку очей — Все шукатиму зірку провідну, Ясну владарку темних ночей.
Примітка: Можна використати будь-який інший поетичний текст, але умови залишаються тими самими.
Результат

Збережіть файл як contra_spem.html та перевірте його в браузері на комп’ютері та на мобільному пристрої. Переконайтеся, що fixed-заголовок працює, куплети розташовані у двох колонках, а на мобільному вигляд адаптивний.

⭐ Додаткове завдання (підвищеної складності): Додайте CSS-анімацію зміни кольору рамки куплетів при наведенні (наприклад, плавний перехід кольору рамки).
Назад Вперед Зміст