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”类分配任何背景（颜色或图像），这就是为什么由于透明性而使其像这样显示的原因。只需添加“背景：#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;
}

您知道我为什么遇到这个问题吗？

2 个答案: