Позиціонування

CSS позиціонування — шахові фігури на точних позиціях на дошці

У попередніх уроках ми стилізували зовнішній вигляд елементів. Тепер навчимося контролювати їх розміщення на сторінці — як елементи поводяться відносно один одного та як їх рухати.

Display — як елемент поводиться

Кожен HTML-елемент має тип відображення за замовчуванням:

Block — блоковий

Займає всю доступну ширину, починається з нового рядка:

[==================== h1 ====================]
[==================== p  ====================]
[==================== div ===================]

Блокові за замовчуванням: <div>, <p>, <h1>-<h6>, <section>, <header>, <ul>, <li>.

Inline — рядковий

Займає тільки стільки місця, скільки потрібно, не починає нового рядка:

Текст [a] та [strong] на одному рядку [em] разом

Рядкові за замовчуванням: <a>, <strong>, <em>, <span>, <img>.

Inline-block — гібрид

Як inline (на одному рядку), але можна задавати width, height, margin:

.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #e2e8f0;
  border-radius: 4px;
}

None — сховати елемент

.hidden {
  display: none; /* елемент повністю зникає зі сторінки */
}

Порівняння

Position — позиціонування

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

Елемент у звичайному потоці документа. Властивості top, right, bottom, left не працюють.

relative — відносне

Елемент залишається на своєму місці, але його можна зсунути відносно початкової позиції:

.shifted {
  position: relative;
  top: 10px;   /* зсунути вниз на 10px */
  left: 20px;  /* зсунути вправо на 20px */
}

Важливо: інші елементи не займають звільнене місце — вони ведуть себе так, ніби елемент не рухався.

absolute — абсолютне

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

.parent {
  position: relative; /* стає "якорем" для дочірнього */
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  /* Прилипне до правого верхнього кута .parent */
}

fixed — фіксоване

Елемент фіксується відносно вікна браузера і не рухається при прокручуванні:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 100;
}

Ідеально для: шапка сайту, кнопка "нагору", чат-віджет.

sticky — "липкий"

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

.section-title {
  position: sticky;
  top: 0;
  background: white;
}

z-index — керування шарами

Коли елементи перекриваються, z-index визначає хто зверху:

.behind { z-index: 1; }
.infront { z-index: 10; }   /* цей буде зверху */

• Більше число = ближче до користувача
• Працює тільки з position (relative, absolute, fixed, sticky)
• За замовчуванням: z-index: auto (порядок у HTML)

Практика: картка з бейджем

<div class="card">
  <span class="badge">NEW</span>
  <h3>Курс JavaScript</h3>
  <p>Вивчи JS за 5 тижнів</p>
</div>

.card {
  position: relative;
  width: 280px;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-block;
  padding: 4px 10px;
  background-color: #e94560;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
}

Центрування — вічне питання

/* Горизонтальне центрування блоку */
.center-block {
  width: 400px;
  margin: 0 auto;
}

/* Центрування тексту */
.center-text {
  text-align: center;
}

/* Центрування за допомогою position (absolute) */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

У наступних уроках ми вивчимо Flexbox — найзручніший спосіб центрування та вирівнювання.

Підсумок

• display: block (новий рядок), inline (в потоці), inline-block (гібрид), none (сховати)
• position: relative — зсув від початкової позиції
• position: absolute — позиція відносно relative-предка
• position: fixed — фіксація у вікні (не рухається при скролі)
• position: sticky — "прилипає" при прокручуванні
• z-index — порядок шарів (тільки з position)

Що далі?

У наступному уроці вивчимо Flexbox — потужний інструмент для створення гнучких layouts.