Про позиціонування в CSS

Що таке позиціонування css і наскільки воно важливе у створенні сучасних веб-макетів?

CSS (Cascading Style Sheets) є мовою стилів, яка застосовується для оформлення веб-сторінок. Якщо HTML визначає структуру вмісту веб-сторінки, то без CSS сторінки будуть виглядати простими і тривіальними. Вона дає змогу додавати кольори, шрифти, відступи, межі та багато іншого, щоб зробити сторінки привабливішими та функціональнішими.

За допомогою CSS можна створювати різноманітні ефекти, як-от анімації, переходи та тіні, що робить веб-сторінки інтерактивнішими та привабливішими для користувачів. На курсі Front End студенти компанії FoxmindED якраз усе це вивчають на практиці (і верстку, і анімацію з використанням CSS). І чому це важливо? Розуміння принципів позиціонування дає змогу розробникам точно контролювати розташування елементів на сторінці та створювати складніші й ефективніші макети.

Без грамотно проведеного процесу позиціонування картинок css порушується – елементи можуть перекриватися, вирівнюватися неправильно або створювати хаотичний зовнішній вигляд сторінки. Тому знання основних властивостей і методів позиціонування в CSS – просто необхідні веб-розробнику, щоб створювати структуровані та привабливі веб-інтерфейси для користувачів.

Основи позиціонування

Для визначення типу позиціонування елемента застосовується властивість position. Розглянемо основні види позиціонування css:

1. static (за замовчуванням)

• Елемент перебуває у своєму природному положенні в потоці документа.

2. relative

• Елемент зміщується відносно свого нормального положення.
• Властивості: top, right, bottom, left.

3. absolute

• Елемент позиціонується відносно найближчого позиціонованого предка.
• Властивості: top, right, bottom, left, z-index.

4. fixed

• Елемент фіксується відносно вікна браузера.
• Властивості: top, right, bottom, left.

5. sticky

• Поєднує властивості relative і fixed, даючи змогу елементу “прилипати” до певного місця під час прокручування.
• Властивості: top, right, bottom, left.

Розглянемо приклади position css кожного значення:

• static (відображення елемента в нормальному потоці документа):

.static-example {

  position: static;

}

• relative (зміщення елемента на 10px вниз і 20px вправо відносно його вихідного положення):

.relative-example {

  position: relative;

  top: 10px;

  left: 20px;

}

• absolute:

.absolute-example {

  position: absolute;

  top: 50px;

  left: 50px;

}

• fixed (фіксація елемента у верхньому правому куті вікна перегляду. Під час прокручування він залишиться на місці):

.fixed-example {

  position: fixed;

  top: 0;

  right: 0;

}

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

.sticky-example {

  position: sticky;

  top: 0;

}

Робота з відносним позиціонуванням

Відносне позиціонування (position: relative) дає змогу зміщувати елемент відносно його вихідного положення в потоці документа, водночас зберігаючи інші елементи на сторінці в незмінному стані. Position relative – це властивість, яка не виводить елемент із потоку, на відміну від абсолютного або фіксованого позиціонування:

.relative-container {

  position: relative;

}

.relative-element {

  position: relative;

  top: 20px;

  left: 30px;

}

У цьому прикладі у нас є контейнер .relative-container, який має відносне позиціонування. Потім, усередині цього контейнера, у нас є елемент .relative-element, який також має відносне позиціювання і зміщений на 20px вниз і 30px праворуч щодо його вихідного положення.

Таке положення не виводить елемент із нормального потоку документа, тому інші елементи на сторінці розташовуватимуться так само, як якби елемент не мав жодного позиціонування. Однак, за допомогою властивостей top, bottom, left і right можна зміщувати елемент відносно його початкового місця розташування.

Це корисно при створенні складних макетів, де елементи мають бути вирівняні відносно один одного або відносно якогось спільного батьківського елемента.

Використання абсолютного позиціонування

Абсолютне позиціонування (position: absolute) дає змогу елементу розміщуватися відносно його найближчого предка, який має позиціонування, відмінне від значення static. Якщо такого позиціонування у предка немає, елемент позиціонуватиметься відносно вікна браузера:

<div class="container">

  <div class="absolutely-positioned-element"></div>

</div>

.container {

  position: relative;

}

.absolutely-positioned-element {

  position: absolute;

  top: 50px;

  left: 50px;

}

У цьому прикладі у нас є контейнер із класом .container, який використовує відносне позиціонування. Усередині нього знаходиться елемент із класом .absolutely-positioned-element, який використовує абсолютне позиціонування і розміщується відносно контейнера.

Які є типові сценарії для такого розташування?

• Меню навігації: елементи меню можуть бути абсолютно позиційовані відносно батьківського контейнера, щоб створити стильне меню, яке випадає, яке з’являтиметься поверх вмісту сторінки.

• Вспливаючі вікна та модальні діалоги: тут часто використовується абсолютне позиціонування для точного розміщення елементів на екрані.

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

• Елементи з анімацією: для плавного переміщення елементів по екрану без зміни решти вмісту сторінки.

• Інтерактивні елементи: Такі елементи, як кнопки або іконки, можуть бути абсолютно позиційовані для створення інтерактивного користувацького інтерфейсу.

Фіксоване і прилипаюче позиціонування

• Елемент із фіксованим позиціюванням (position: fixed) позиціонується відносно вікна перегляду і залишається на місці, навіть під час прокручування сторінки. Це дає змогу створювати елементи, як-от шапки сайту або навігаційні панелі, які завжди залишаються видимими на екрані.

.fixed-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  background-color: #ffffff;

  padding: 10px;

}

• Позиціонування, що прилипає, (position: sticky) схоже на фіксоване, але елемент починає поводитися як relative доти, доки він не досягне певного порогу прокрутки, після чого він прилипає до верху або до низу контейнера відповідно до зазначеної властивості top або bottom.

.sticky-menu {

  position: -webkit-sticky; /* To support web kit browsers*/

  position: sticky;

  top: 0;

  background-color: #ffffff;

  padding: 10px;

}

Як створити за допомогою цих методів інтерактивні та статичні елементи інтерфейсу?

1. Інтерактивні:

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

2. Статистичні:

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

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

Завдання, проблеми та рішення 

Наведемо приклади складних макетів і методи їх реалізації з використанням різних технік позиціонування…

1. Багаторівневе меню з пунктами, що випадають

• Методи: зазвичай використовуються списки ul і li, стилізовані за допомогою CSS.
• Позиціонування: може використовуватися відносне позиціонування для батьківських елементів і абсолютне – для дочірніх елементів.

2. Інтерактивна мапа з маркерами та інформацією

• Методи: карта може бути створена з використанням бібліотеки карт, таких як Google Maps API або Leaflet.
• Позиціонування: маркери можуть бути розміщені з абсолютним позиціонуванням на карті, а інформаційні вікна можуть з’являтися в певному місці екрана під час кліка на маркер.

3. Складні форми з динамічними елементами

• Методи: для створення складних форм можуть використовуватися HTML-елементи <form> і різні елементи введення.
• Позиціонування: динамічні елементи, як-от спливаючі підказки або повідомлення про помилки, можуть бути абсолютно розміщені щодо відповідних елементів форми.

Які існують типові проблеми під час розміщення елементів на сторінці та як їх розв’язати?

1. Елементи можуть перекривати один одного, що призводить до небажаного візуального ефекту.

Рішення: використовувати властивості z-index для управління порядком накладання елементів. Перевірка порядку елементів у HTML і правильне позиціонування допоможуть уникнути перекриття.

2. Елементи можуть не вирівнюватися так, як це було задумано, особливо під час використання різних технік позиціонування.

Рішення: уважне використання властивостей top, bottom, left і right, а також властивості margin і padding, для коректного вирівнювання елементів. Використання інструментів розробника браузера для налагодження та коригування стилів.

3. Візуальні дефекти можуть виникати через відмінності в інтерпретації CSS різними браузерами та пристроями.

Рішення: тестування та адаптація макетів на різних пристроях і в різних браузерах. Використання сучасних методик розробки, таких як адаптивний і реактивний дизайн, щоб забезпечити гарне відображення на всіх пристроях і за будь-якої роздільної здатності екрана.

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

Висновок

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