为什么我的z-index无法使用剪切路径？

Question

我正在尝试将我的中间div设置为background_top div。这是我第一次使用剪切路径，似乎它忽略了z-index（？）。在下面，我添加了一个Codepen。

background_top div确实具有剪切路径，使其底部倾斜，我正在尝试使其位于中间div的顶部。

我给我的background_top的z索引为-100，中间为z-index -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;
}

Answer 1

您需要设置z-index的工作位置

只需添加position:relative;

.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: 1;
  position: relative;
}

.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: 2;
  background: #232323;
  background-image: url("images/placeholder.jpg");
  background-size: cover;
  position: relative;
}

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

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

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