Как наложить картинку на картинку в html

Для наложения картинки на картинку в HTML можно использовать абсолютное позиционирование. Для этого необходимо создать контейнер, который будет содержать обе картинки, и применить к этому контейнеру относительное позиционирование. Затем, для каждой картинки нужно задать абсолютное позиционирование и указать координаты ее расположения относительно родительского контейнера. Например:

<div class="container">
  <img src="image1.jpg" class="image image1" />
  <img src="image2.jpg" class="image image2" />
</div>

В данном примере изображения с размерами 300x200 будут распологаться одна над другой.

у меня почему то не работает этот способ. Есть фоновая картинка, которая собрана наложением одной на другую.

Всё работает. Спасибо за мануал

Одну картинку кладут поверх другой абсолютным позиционированием. Обе картинки помещают в общий контейнер с position: relative:

<div class="photo">
  <img src="photo.jpg" alt="Фото товара">
  <img class="badge" src="sale.png" alt="Скидка">
</div>

.badge отсчитывает координаты от контейнера .photo. Без position: relative у контейнера значок уедет к краю страницы.

Картинка по центру другой

.badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Какая картинка сверху

Позже в коде — выше на экране. Порядок меняет z-index, он работает у позиционированных элементов:

.badge {
  z-index: 2;
}

Полупрозрачное наложение

.badge {
  opacity: 0.7;
}

Наложить фоновые картинки

В комментарии спрашивали, как собрать фон из нескольких изображений. Для фона позиционирование не нужно: в background-image перечисляют картинки через запятую. Первая окажется сверху:

.hero {
  background-image: url("logo.png"), url("background.jpg");
  background-position: right 20px bottom 20px, center;
  background-size: 120px, cover;
  background-repeat: no-repeat;
}

Значения background-position и background-size идут в том же порядке, что и картинки. Если верхняя картинка закрывает нижнюю целиком, проверьте, что у неё есть прозрачные области: JPEG прозрачность не поддерживает, нужен PNG, WebP или SVG.

Через Grid без position

.photo {
  display: grid;
}

.photo img {
  grid-area: 1 / 1;
}

Обе картинки займут одну ячейку сетки и лягут друг на друга. Удобно, когда размеры картинок совпадают.

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