你知道我为什么会遇到这个问题吗

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

这是我网站的 link，您可以查看我希望它放置这个黑色矩形的位置

https://www.fitardo.com/

Answer 1

你需要使用 margin-top: -100px;

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

Answer 2

你的代码是正确的。实际上，您还没有为“.box”class 分配任何背景（颜色或图像），这就是它由于透明度而显示为这样的原因。只需在“.box”中添加 "background: #fff;" class。我在下面给出了相同的更新 class 代码。试试这个，它会起作用：

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

你知道我为什么会遇到这个问题吗

Do you know why i am getting this problem

html

css

z-index

css-position

web