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

Чтобы наложить одну картинку на другую с помощью CSS, вы можете использовать свойство position и z-index.

1. Сначала подготовьте две картинки, которые вы хотите наложить друг на друга.
2. Оберните их в контейнер и установите для него position: relative:

<div class="image-container">
  <img src="image-1.jpg" alt="Image 1">
  <img src="image-2.jpg" alt="Image 2">
</div>

.image-container {
  position: relative;
}

Здесь мы приписываем относительное позиционирование для контейнера (.image-container) для того, чтобы другие элементы могли быть наложены поверх него.

3. Добавьте позиционирование и z-index для каждой картинки:

.image-container img:first-child {
  position: relative;
  z-index: 1;
}

.image-container img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

Здесь мы используем селектор :first-child для первой картинки и задаем ей position: relative и низкий уровень z-index, чтобы она оставалась в фоновом режиме. Вторая картинка получает абсолютное позиционирование (position: absolute) и z-index: 2, чтобы она находилась поверх первой картинки. Мы также добавляем свойства top: 0 и left: 0, чтобы задать ей начальную позицию, налагая ее точку старта на начало контейнера.

Это пример, который можно настроить под каждую конкретную ситуацию, но эти инструкции являются общими.