Как сделать блок поверх другого в css

Для того, чтобы создать блок, который будет поверх другого блока в CSS, можно использовать свойство z-index. Это свойство контролирует порядок слоев элементов на странице по оси Z.

Рассмотрим пример, в котором создается блок, который будет поверх другого блока.

<div class="container">
  <div class="box1">Блок 1</div>
  <div class="box2">Блок 2</div>
</div>

Добавим стили для контейнера и блоков:

.container {
  position: relative;
  height: 200px;
}

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: gray;
}

.box2 {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 100px;
  height: 50px;
  background-color: red;
  z-index: 1;
}

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

Мы также задали различные размеры для обоих блоков и установили разные цвета заливки.

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

Результатом будет блок 1 с серым фоном, на который наложен блок 2 с красным фоном. Блок 2 будет перекрывать часть блока 1. Попробуйте изменить значение z-index, чтобы увидеть, как это влияет на позицию блоков.