Why is my z-index not working with clip-path?

Question

I am trying to make my middle div under my background_top div. This is my first time using clip-path, and it seems like it ignores the z-index(?). Down below I have added a codepen.

The background_top div does have a clip-path, giving it a slanted bottom, and I am trying to get it ontop of the middle div.

I have given my background_top a z-index of -100, and my middle a z-index of -250

Here is my code:

<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

you need to set the position for z-index to work

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