Do you know why i am getting this problem

Question

I am facing a problem in z-index where I create empty div and set all its properties as below but still, this isn't working with boxes it's not going behind the boxes

// 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>

I want it to be like that as shown in this image

Refrence Image

Here is a link to my website you can check where I want it to place this black rectangle

https://www.fitardo.com/

Answer 1

Your code is correct. Actually you have not assigned any background (color or image) to the ".box" class that is why it is showing like this due to transparency. Just add "background: #fff;" in ".box" class. I have given below updated class code for the same. Try this, it will work:

.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;
  }