🎨

Модуль 2. CSS и оформление

Занятие 18
Позиционирование

Сегодня мы прикрепим к карточке яркий бейдж «Новинка» и разберёмся, как элементы накладываются друг на друга.

👀

Сегодня сделаем вот такое

🌊

Нормальный поток

Элементы идут по порядку, как вагоны поезда 🚃🚃🚃

Никто не залезает на соседей.

А как сделать наклейку поверх? 🏷

Свойство position.

🧭

Пять видов position

  • static — обычно
  • relative — точка отсчёта
  • absolute — наклейка по координатам
  • fixed — прибит к окну
  • sticky — прилипает при прокрутке
🏷

Рецепт бейджа

Родителю relative,
ребёнку absolute

top: 10px; right: 10px; — правый верхний угол

<div class="card">
  <span class="badge">Новинка</span>
  <img src="/images/rocket.svg" alt="Ракета">
</div>
.card {
  position: relative;
  width: 200px;
}
.card img { width: 100%; display: block; }
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #d63031;
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
}
🖼

Подпись поверх картинки

  • bottom: 0; left: 0; right: 0 — вдоль низа
  • rgba(0,0,0,0.6) — полупрозрачный фон
<div class="photo">
  <img src="/images/mountain.svg" alt="Горы">
  <div class="caption">Горы на рассвете</div>
</div>
.photo { position: relative; width: 240px; }
.photo img { width: 100%; display: block; }
.caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: sans-serif;
}
📌

fixed и sticky

  • fixed — кнопка «Наверх» всегда в углу
  • sticky; top: 0 — меню прилипает к верху

Прокрути результат справа ↓

<nav class="menu">Липкое меню</nav>
<p>Прокручивай вниз...</p>
<p style="height: 600px">Много текста</p>
<a class="up" href="#">↑</a>
body { margin: 0; font-family: sans-serif; }
.menu {
  position: sticky; top: 0;
  background: #00b894; color: white; padding: 12px;
}
.up {
  position: fixed; right: 16px; bottom: 16px;
  background: #0984e3; color: white;
  padding: 10px 14px; border-radius: 50%;
}
📄

z-index — стопка листов

  • Больше число — ближе к нам
  • Работает только с position
  • Хватит 1, 2, 10 — не нужно 99999
<div class="sheet a">A: z-index 1</div>
<div class="sheet b">B: z-index 3</div>
<div class="sheet c">C: z-index 2</div>
.sheet {
  position: absolute;
  width: 150px; height: 90px; padding: 8px;
  font-family: sans-serif; color: white;
}
.a { top: 10px; left: 10px; background: #e17055; z-index: 1; }
.b { top: 40px; left: 60px; background: #0984e3; z-index: 3; }
.c { top: 70px; left: 110px; background: #00b894; z-index: 2; }
🐞

Куда улетел бейдж?

Бейдж должен быть в углу карточки, а оказался в углу страницы. И z-index не работает. Почему?

.card {
  width: 260px;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}
.caption {
  z-index: 5;
}
🃏

Запомни!

  • position: relativeТочка отсчёта
  • position: absoluteПо координатам внутри родителя
  • top / right / bottom / leftКоординаты
  • position: fixedПрибит к окну
  • position: sticky; top: 0Липкое меню
  • z-index: 10Слой: кто сверху
⌨️

Практика: Бейдж или подпись на карточке

  1. Сделай карточку товара или игры с картинкой.
  2. Добавь бейдж «Новинка» в правый верхний угол карточки.
  3. Сделай подпись поверх нижней части картинки.
  4. Добавь кнопку «Наверх», закреплённую в правом нижнем углу окна.

🚀 Со звёздочкой: Сделай «липкую» шапку сайта с position: sticky и наложи два блока друг на друга, меняя z-index.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Найди на любимых сайтах 2 элемента, которые «висят» поверх других.