title: Overlay 2 DIVs where one is Static and the other is Scrollable
body: <p>I am creating a page where the Hero image must stay centered on screen as the visitor scrolls down the page.  Elements that are scrollable will 'frame' the Hero image as they scroll past.</p>
  
  <p>However, my initial screen (above-the-fold) must have the Hero image, and the first Frame image, overlaid, and no matter how I mix position: sticky with fixed, absolute, static... Nothing will work, and the Frame appears below the Hero (i.e. the div will not overlap/overlay).</p>
  
  <p>Also, I want the Frame layer in front of the Hero, but z-index appears to make no difference.</p>
  
  <p>here is my layout:</p>
  
  <pre><code>&lt;div class="homepage"&gt;
      &lt;div class="hero-image"&gt;
          &lt;img src="images/hero-can.png"&gt;
      &lt;/div&gt;
      &lt;div class="homeScreen1"&gt;
          &lt;img src="images/water-splash.png"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>here is my CSS:</p>
  
  <pre><code>.homepage {
      background-image: url('images/background.jpg');
  }
  
  .hero-image {
      margin: 0 auto;
      max-width: 512px;
      position: sticky;
      top: 0;
      z-index: 99999;
  }
  
  .homeScreen1 {
      margin: 0 auto;
      width: 1024px;
      text-align: center;
      z-index: 999999;
  }
  </code></pre>
  
  <p>Appreciate any help!!</p>