title: allow scroll of div set behind another div
body: <p><img src="https://i.stack.imgur.com/yIjyD.png" alt="enter image description here"></p>
  
  <p>I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here <a href="https://jsfiddle.net/vk0jk37v/" rel="nofollow noreferrer">https://jsfiddle.net/vk0jk37v/</a> but I cant seem to get even this to work. </p>
  
  <p>in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends. </p>
  
  <p>Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction</p>
  
  <p>Edit2: the image attached is the context in which I am applying this.</p>
  
  <p>example html</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" /&gt;
      &lt;div class="inner"&gt;
          &lt;img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>example css</p>
  
  <pre><code>.container {
      width: 70%;
      position: relative;
  }
  .frame {
      /* position: absolute; */
      width: 100%;
      z-index: 100;
  }
   .inner {
      height: 558px;
      overflow: scroll;
      position: absolute; 
      top: 14%;
      left: 38px;
  }
  .inner img {
      width: 92%;
      z-index: -100;
  }
  </code></pre>