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

Короткий ответ

Родителю — position: relative, накладываемому элементу — position: absolute и координаты:

<div style="position: relative; width: 300px;">
  <img src="/media/photo-400x250.jpg" alt="" style="width: 100%; display: block;">
  <p style="position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px; background: rgb(0 0 0 / 60%); color: white;">Summer in the mountains</p>
</div>

Абсолютный элемент отсчитывает left, bottom и другие координаты от ближайшего предка с позиционированием — поэтому у обёртки стоит relative.

Без абсолютного позиционирования

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

<style>
  .stack { display: grid; width: 300px; }
  .stack > * { grid-area: 1 / 1; }
  .stack h2 { align-self: center; justify-self: center; margin: 0; color: white; }
</style>
 
<div class="stack">
  <img src="/media/photo-400x250.jpg" alt="" style="width: 100%;">
  <h2>Sale</h2>
</div>

Кто сверху

Из наложенных элементов выше тот, что идёт позже в коде. Порядок меняет z-index, и работает он только у элементов с position или у детей flex- и grid-контейнера.

Частая ошибка

Если забыть position: relative у родителя, абсолютный элемент отсчитывает координаты от всей страницы и улетает в её угол.