Как сделать наложение блоков css

Наложение блоков можно создать с помощью позиционирования в CSS. Рассмотрим один из примеров наложения блоков:

<div class="block-1"></div>
<div class="block-2"></div>

.block-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: red;
}

.block-2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: blue;
}

В этом примере мы использовали абсолютное позиционирование для блоков, чтобы они находились в одном месте. Первый блок .block-1 помещается в левом верхнем углу окна браузера (top:0, left:0) и имеет красный фон. Второй блок .block-2 находится на 50px ниже и на 50px правее верхнего угла первого блока (top:50px, left:50px) и имеет синий фон.

Обратите внимание, что при использовании абсолютного позиционирования, блоки находятся «за» основным содержимым страницы, поэтому для этого метода наложения блоков может потребоваться установка необходимых свойств для смещения на место, где они должны быть видны.

Также можно использовать свойство z-index для управления тем, какой блок будет находиться «впереди» другого блока. Если вы хотите, чтобы блок находился выше другого, задайте ему более высокий z-index. Например:

.block-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 1;
}

.block-2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: blue;
  z-index: 2;
}

Значения z-index должны быть целыми числами. Чем больше число, тем выше блок находится.