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

Чтобы наложить один элемент на другой в CSS, можно использовать свойство position со значением absolute для дочерних элементов, находящихся в контейнере со свойством position: relative. Порядок слоёв определяется с помощью свойства z-index.

Пример:

<div style="position: relative;">
  <div style="position: absolute; z-index: 1;">Нижний DIV</div>
  <div style="position: absolute; z-index: 2;">Верхний DIV</div>
</div>

Для наложения одного блока на другой блок в CSS можно использовать свойство position в сочетании с top, bottom, left, right.

Пример:

HTML:

<div class="block1"></div>
<div class="block2"></div>

CSS:

.block1 {
    width: 200px;
    height: 200px;
    background-color: #f00; /* красный цвет */
    position: relative;
}

.block2 {
    width: 100px;
    height: 100px;
    background-color: #00f; /* синий цвет */
    position: absolute;
    top: 50px;
    left: 50px;
}

В этом примере block2 наложен поверх block1. Блок block1 имеет свойство position: relative;, а блок block2 имеет position: absolute; с заданными top и left. Это позволяет блоку block2 быть наложенным на блок block1.

Чтобы положить один блок поверх другого, верхнему задают position: absolute, а общему родителю — position: relative:

<div class="card">
  <div class="content">Карточка товара</div>
  <div class="label">Новинка</div>
</div>

Координаты top, right, bottom, left считаются от ближайшего родителя с position: relative, absolute, fixed или sticky.

Блок на весь родитель

Затемнение поверх картинки или карточки:

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

inset: 0 — короткая запись top: 0; right: 0; bottom: 0; left: 0.

Порядок слоёв: z-index

Позже в HTML — выше на экране. Другой порядок задают через z-index:

.label {
  z-index: 10;
}

z-index работает только у элементов с position, отличным от static, и у элементов flex- и grid-контейнеров.

z-index не помогает

Элемент со свойствами opacity меньше 1, transform, filter или position с z-index создаёт свой контекст наложения. Его дети не поднимутся выше соседей родителя, какой бы z-index им ни поставили. Поднимите z-index у самого родителя.

Наложение через Grid

Если блоки одного размера, позиционирование не нужно:

.card {
  display: grid;
}

.card > * {
  grid-area: 1 / 1;
}

Все дочерние элементы займут одну ячейку и лягут друг на друга, при этом родитель растянется по самому высокому.

Сдвиг с частичным перекрытием

Отрицательный отступ наезжает блоком на соседний:

.avatar {
  margin-top: -40px;
}

Позиционирование разбирают в курсе «Профессиональная вёрстка».