Html 为什么我的z索引不能使用剪辑路径？

我试图在背景下制作中间div_top div。这是我第一次使用clip path，它似乎忽略了z索引（？）。下面我添加了一个代码笔

背景的顶部有一个剪辑路径，给它一个倾斜的底部，我正试图把它放在中间的顶部

我给我的背景顶部的z指数为-100，中间的z指数为-250

这是我的密码：

<div class="background_top">
    <h1>we build<span>futures.<span></h1>
    <div class="top_quote">
        <h2>“</h2>
      </div>
      <div class="top_p">
        <p></p>
      </div>
</div>

<div class="middle">
  <a href="#"></a>
</div>

</body>

<footer>

<div class="footer">
  <div class="">
  <p></p>
</div>
  </div>
</footer>


.middle {
  margin-top: -45vh;
  height: 150vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
  background-color: #B2DFEE;
  z-index: -250;
}

.background_top {
  height: 95vh;
  width: 100vw;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
  z-index: -100;
  background: #232323;
  background-image: url("images/placeholder.jpg");
  background-size: cover;
}

.footer {
  width: 100vw;
  background-color: #232323;
  height: 100vh;
  position: fixed;
  bottom: 0;
  z-index: -230;
}

我们创造未来。
“


.中{
利润上限：-45vh；
高度：150vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%100,0,80%）；
剪辑路径：多边形（0,100%0,100%100,0,80%）；
背景色：#B2DFEE；
z指数：-250；
}
.background_top{
高度：95vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%60,0,100%）；
剪辑路径：多边形（0,100%0,100%60,0,100%）；
z指数：-100；
背景:#2323；
背景图片：url（“images/placeholder.jpg”）；
背景尺寸：封面；
}
.页脚{
宽度：100vw；
背景色：#232323；
高度：100vh；
位置：固定；
底部：0；
z指数：-230；
}

您需要设置

z-index

的位置才能工作

只需添加

位置：相对；

.middle{
利润上限：-45vh；
高度：150vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%100,0,80%）；
剪辑路径：多边形（0,100%0,100%100,0,80%）；
背景色：#B2DFEE；
z指数：1；
位置：相对位置；
}
.background_top{
高度：95vh；
宽度：100vw；
-webkit剪辑路径：多边形（0,100%0,100%60,0,100%）；
剪辑路径：多边形（0,100%0,100%60,0,100%）；
z指数：2；
背景:#2323；
背景图片：url（“images/placeholder.jpg”）；
背景尺寸：封面；
位置：相对位置；
}
.页脚{
宽度：100vw；
背景色：#232323；
高度：100vh；
位置：固定；
底部：0；
z指数：-230；
}

我们创造未来。
“

Whao，我觉得自己像个白痴，完全忘记了！非常感谢！