title: Absolute-positioned div scrolls inside absolute-positioned parent
body: <p>I have an absolute-positioned div with two children -- an absolute-positioned div and a static div which will scroll inside the parent. It looks like this:</p>
  
  <pre><code>&lt;div class='frame'&gt;
    &lt;div class='absolute-contents'&gt;This should stay put.&lt;/div&gt;
    &lt;div class='static-contents'&gt;This should scroll under it.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.frame {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    overflow-y: scroll;
  }
  
  .absolute-contents {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    z-index: 9999;
    opacity: .9;
    padding: 40px;
  }
  
  .static-contents {
    margin: 24px auto;
    width: 400px;
    height: 3000px;
    padding: 40px;
  }
  </code></pre>
  
  <p>I have the absolute child constrained to the edges of the parent, so why does it still scroll, and how can I make it stay put?</p>
  
  <p>Example: <a href="https://codepen.io/anon/pen/wqZxXG" rel="nofollow noreferrer">https://codepen.io/anon/pen/wqZxXG</a></p>