title: Increasing opacity of overlay <div> is darkening both higher and lower stacked content instead of just lower stack
body: <p>I was trying to get an overlay that darkens as I scroll down so that it hides the <code>&lt;body&gt;</code> background but it is darkening on top of both the <code>&lt;body&gt;</code> and the <code>&lt;div&gt;</code> element that is supposed to be on top (has a higher z-index value) of it. I'd really appreciate if someone could tell me what I'm doing wrong here.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="background-overlay" class="scroll"&gt;&lt;/div&gt;
      &lt;div id="div1" class="scroll"&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>        * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }
          body { 
              background-image: 
              url('https://c4.wallpaperflare.com/wallpaper/209/417/77/pyramid- 
              history-sky-landmark-wallpaper-6930e82dc12a0d8bc657389f9011062d.jpg');
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center center;
              width: 100vw;
              height: 100vh;
              background-attachment: fixed;
              z-index: -10;
          }
          #div1 {
              margin: 0 auto;
              width: 80vw;
              height: 1000vh;
              background-color: rgb(71, 38, 0);
              color: white;
              text-align: center;
              z-index: 100;
          }
          div#background-overlay {
              background-color: black;
              width: 100vw;
              height: 100vh;
              opacity: 0;
              position: fixed;
              top: 0;
              left: 0;
              z-index: 1;
          }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>        var scrollDiv = document.querySelectorAll('.scroll');
          window.addEventListener('scroll', function() {
              scrollDiv.forEach(element =&gt; {
                  if(element.id == 'background-overlay') {
                      scrollOverlay = window.pageYOffset *.0005;
                      element.style.opacity = scrollOverlay;
                  }
              })
          });
  </code></pre>