Как наложить элементы друг на друга CSS

Чтобы наложить элементы друг на друга в CSS, можно использовать абсолютное позиционирование и задать им координаты top и left.

HTML:

<div class="overlay">
  <img src="image.jpg" alt="Image">
  <div class="text-overlay">
    <h2>Title</h2>
    <p>Some text here</p>
  </div>
</div>

CSS:

.overlay {
  position: relative; // Родительский элемент должен иметь позиционирование
}

.overlay img {
  position: absolute; // Абсолютное позиционирование для первого элемента (картинки)
  top: 0;
  left: 0;
}

.overlay .text-overlay {
  position: absolute; // Абсолютное позиционирование для второго элемента (текста)
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); // Центрирование элемента относительно родительского блока
}

В данном примере мы создаем родительский элемент .overlay, который позиционируется относительно других элементов (обычно это бывает для body). Затем мы создаем блок с изображением и задаем ему абсолютное позиционирование, чтобы он был поверх текста. Используем свойства top и left чтобы задать ему координаты.

Затем мы создаем блок с текстом и также задаем ему абсолютное позиционирование. Затем используем свойство top и left чтобы задать ему координаты в середине блока и transform чтобы выровнять его по центру родительского блока.

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