z-index & width issue with nested absolute, fixed and relative elements - html

Question

I am building a complex webapp using React and I'm trying to figure out the smartest way to handle a complex positioning and layering situation.
I'm wondering if I need to rethink my entire structure or just tweak some css values.
The code below explains my issues:
aside {
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 100vh;
background: blue;
color: white;
}
main {
position: absolute;
overflow: hidden;
background-image: url('https://i.ytimg.com/vi/6sta6Gkpgcw/maxresdefault.jpg');
background-size: cover;
top: 0;
left: 20%;
width: 80%;
height: 100vh
}
.page-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
}
.overlay {
position: fixed;
z-index: 1;
padding: 40px;
color: white;
font-size: 24px;
width: calc(80% - 80px);
height: 100vh;
background-color: rgba(0, 0, 0, .5);
}
ul {
position: relative;
z-index: 2;
list-style: none;
color: white;
font-size: 24px;
line-height: 2em;
padding-top: 100vh;
}
ul li {
display: inline-block;
width: 200px;
height: 200px;
text-align: center;
padding: 20px;
background: #ccc;
color: red;
margin: 50px;
}
button {
padding: 10px 30px;
background: green;
color: white;
font-size: 24px;
}
<aside>
SIDEBAR
</aside>
<main>
<section class="page-wrap">
<div class="overlay">
<button>
This needs to be clickable even though the list is on top
</button>
<div>
<h1>My issues here are:</h1>
<ol>
<li>the green button is covered (disabled) by the list</li>
<li>the overlay covers the scrollbar on its parent page-wrap section</li>
</ol>
</div>
</div>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>6</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>vew</li>
<li>Item</li>
</ul>
</section>
</main>
FIDDLE

Answer 1

My solution was to restructure the DOM so the body had the overflow. I had been trying to avoid this because it's a large webapp with a lot of components and pages, many of which suffered collateral damage, but ultimately, it solved my problem.