title: CSS overlay on scrollable DIV
body: <p>I have a class <code>overlay</code>. The purpose is that I can add it to any div to create an overlay while loading data. It works perfectly except on <code>divs</code> where the content can overflow.</p>
  
  <p><strong>HMTL</strong></p>
  
  <pre><code>&lt;div id="myDiv" &gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div id="innerDiv"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.overlay{
    position: absolute;
    background-color: #888888;
    top: 0px;
    opacity: 0.5;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 50px;
  }
  </code></pre>
  
  <p>Here is the example on
  <strong><a href="http://jsfiddle.net/8z842871/" rel="nofollow">JSFiddle</a></strong>. Scroll down in the box and you will see the problem.</p>