嵌套绝对，固定和相对元素的z-index和宽度问题

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.