title: Overlay that covers only parent div
body: <p>I have a group of controls inside a div (listbox and buttons below), and I'd like to cover them with a semi-transparent overlay (with a centered loading indicator in it).</p>
  
  <p>Parent div size and position are not fixed.</p>
  
  <p>Here is an example: <a href="http://jsfiddle.net/n4fbp8ex/" rel="noreferrer">http://jsfiddle.net/n4fbp8ex/</a>
   - Area of interest is inside red border. I'd like it to be covered with an overlay.
   - "Loading..." div is my overlay. It should cover whole parent div (but nothing else), and text should be centered vertically and horizontally</p>
  
  <p>How do I fix my "centeredOverlay" style?</p>
  
  <p>html:
      </p>
  
  <pre><code>&lt;div class="halfColumn"&gt;
      some content
      &lt;br/&gt;
      &lt;input /&gt;
  &lt;/div&gt;
  &lt;div class="halfColumn"&gt;
      bla bla
      &lt;br/&gt;
      lorem ipsum
      &lt;div style="border-style:solid; border-width: 1px; border-color: red;"&gt;
          &lt;div class="centeredOverlay"&gt;Loading...&lt;/div&gt;
          &lt;select size=2 style="width:100%; height:50vh"&gt;
          &lt;/select&gt;
          &lt;button&gt;Click me&lt;/button&gt;
          &lt;button&gt;Click me too&lt;/button&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.centeredOverlay {
    position: absolute;
    background-color: rgba(0,0,0,0.3); /*dim the background*/
  }
  
  .halfColumn {
      float: left;
      width: 50%;
  }
  
  .halfColumn2 {
      float: right;
      width: 50%;
  }
  </code></pre>