Why is my z-index not working with clip-path? [duplicate] - html

Question

This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 years ago.
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">
</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">
</div>
<footer>
<div class="footer">
<div class="">
<p></p>
</div>
</div>
</footer>