JSFiddle - React, Tailwind, and code Playground

by David Gnanasekaran C

HTML

<aside>
  SIDEBAR
</aside>
<main>
  <section class="page-wrap">
  <div class="overlay">
  <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>
   <button>
  This needs to be clickable even though the list is on top
  </button>
  </section>
</main>

CSS

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;
  position:fixed;
  top:25%;
  z-index:7;
}