Вы знаете, почему я получаю эту проблему

Question

Я сталкиваюсь с проблемой в z-index, где я создаю пустой div и устанавливаю все его свойства, как показано ниже, но тем не менее, это не работает с блоками, это не идет за блоками

// Boxes
.boxes {
  display: grid;
  grid-gap: 70px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 5% 0 5% 0;
}

.box {
  width: 74.5%;
  height: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  padding: 2rem 3rem;
  border-radius: 11px;
}

.box h1 {
  font-size: 37px;
  padding-top: 3.2rem;
  margin: 0;
}

.box p {
  font-size: 20px;
  padding: 1.5rem 0 1.5rem 0;
  margin: 0;
}

.black-back {
  position: absolute;
  width: 100%;
  height: 400px;
  background: black;
  left: 0;
  bottom: 0;
  z-index: -1;
}

<section class="boxes">
  <div class="box">
    <h1>Gyms</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, eveniet.
    </p>
  </div>
  <div class="box">
    <h1>Classes</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, eveniet.
    </p>
  </div>

  <div class="box">
    <h1>Activities</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, eveniet.
    </p>
  </div>
</section>
<div class="black-back"></div>

Я хочу, чтобы это было так, как показано на этом изображении

Refrence Image

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

https://www.fitardo.com/

Answer 1

Ваш код правильный. На самом деле вы не присвоили фону (цвету или изображению) класс ".box", поэтому он отображается так из-за прозрачности. Просто добавьте "background: #fff;" в классе ".box". Я дал ниже обновленный код класса для того же самого. Попробуйте это, это будет работать:

.box{
    width: 74.5%;
    height: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    padding: 2rem 3rem;
    border-radius: 11px;
    background:#fff;
  }

Answer 2

вам нужно использовать margin-top: -100px;

.black-back {
  position: absolute;
  width: 100%;
  height: 400px;
  background-color: #000;
  left: 0;
  bottom: 0;
  margin-top: -100px;
}