Как наложить блок на блок css

Коротко: чтобы один блок (бейдж, подпись, затемнение) «лёг» поверх другого, нужны два инструмента — position и z-index. В статье — все способы с примерами, три практических сценария, разбор ловушек и проверка знаний.

Что такое «наложить блок на блок» простыми словами

Страница — это слои. Представьте лист бумаги и наклейки. Лист — родительский блок, наклейки — дочерние элементы. «Наложить» = положить одну наклейку поверх другой и точно её разместить.

По умолчанию элементы не накладываются: они идут друг за другом сверху вниз (или слева направо, если строчные). Чтобы включить «слои», мы меняем поведение элемента через CSS.

Важно понимать: наложение — это всегда два шага.

1. Позиционирование — говорим браузеру, от чего считать положение блока (от себя, от родителя, от окна).
2. Порядок слоёв — если блоков несколько, задаём, кто выше через z-index.

Шаг 1. position — «от чего считать положение»

Свойство position имеет пять значений. Разберём каждое на вкладках — с примерами и подводными камнями.

.box { position: static; } /* значение по умолчанию */

.card {
  position: relative;   /* точка отсчёта для бейджа */
}
.badge {
  position: absolute;
  top: 8px; left: 8px;
}

.nudge { position: relative; top: 4px; left: 2px; }

.card { position: relative; }   /* обязательный родитель */
.card__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
}

.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 100;
}

.toc {
  position: sticky;
  top: 20px;   /* обязательно, иначе не закрепится */
}

Шаг 2. Смещения: top, right, bottom, left

Смещения работают у любого position, кроме static. Есть короткая запись inset:

.overlay { position: absolute; inset: 0; }        /* растянуть по всем сторонам */
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* то же самое */

Практика: три сценария, которые нужны чаще всего

Сценарий 1. Бейдж на карточке товара

1. Оберните картинку и бейдж в общий контейнер.
2. Контейнеру задайте position: relative.
3. Бейджу — absolute и смещение в угол.
4. При необходимости добавьте z-index.

<div class="card">
  <img src="shoe.jpg" alt="">
  <span class="badge">−30%</span>
</div>

.card { position: relative; display: inline-block; }
.card img { display: block; width: 100%; }
.badge {
  position: absolute; top: 10px; left: 10px;
  background: #992222; color: #fff;
  padding: 4px 10px; border-radius: 8px;
  font: 600 13px/1 system-ui;
}

Сценарий 2. Текст поверх фотографии

.hero { position: relative; }
.hero img { display: block; width: 100%; }
.hero__title {
  position: absolute; inset: auto 0 0 0;
  padding: 20px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}

Градиент снизу делает текст читаемым на любом фото. Это важная деталь: без затемнения белый текст «теряется» на светлых участках.

Сценарий 3. Модальное окно

.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
}
.modal__box { background: #fff; padding: 24px; border-radius: 16px; }

Оверлей растянут на весь экран, а окно центрируется flex‑ом. Такой слой всегда «выше» контента благодаря z-index.

z-index: порядок слоёв и его ловушки

z-index — «этаж» блока. Чем больше число, тем выше он рисуется. Работает у элементов с позиционированием (и во flex/grid‑контекстах).

.tooltip { position: absolute; z-index: 10; }
.modal   { position: fixed;    z-index: 1000; }

Контексты наложения (stacking contexts)

Иногда высокий z-index «не помогает». Причина — новый контекст наложения у родителя (например, из‑за transform, opacity < 1 или своего z-index). Внутри такого родителя свои «этажи», и он не может «перепрыгнуть» соседний контекст.

Частые ошибки: причина → решение

Проверьте себя

Вопросы и ответы

Итоги

• Наложение = position + z-index.
• Родителю — relative, слою — absolute/fixed.
• Смещения: top/right/bottom/left или inset.
• z-index работает только при не‑static.
• Следите за контекстами наложения и адаптивом.