Как наложить блок на блок 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.