title: Overlapping <div>
body: <pre><code>&lt;div id="data_div"&gt;
      &lt;!-- render content here, might take a while... --&gt;
  &lt;/div&gt;
  &lt;div id="loading_div" style="background-color:cyan" &gt;
      Loading, please wait...
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like that "loading_div" overlap "data_div" to create the effect that loading is in progress, while what is really happening is that contents are being already rendered in the background. When the document is ready, then I can do something like</p>
  
  <pre><code>$(document).ready(function () {
      $("#loading_div").hide();
  }
  </code></pre>
  
  <p>How can this be implemented with CSS and/or JQuery?</p>