title: How to get HTML div to overlay the text in its parent div
body: <p>I have a movable div as follows:</p>
  
  <pre><code>&lt;div id=overlay style="display: none; z-index: 99; position: relative; top: 0px; left: 0px;"&gt;&lt;img src="someimage.gif"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>A javascript event listener function includes the following:</p>
  
  <pre><code>var overlay = document.getElementById('overlay');
  rdiv.appendChild(overlay);
  overlay.style.display = '';
  </code></pre>
  
  <p>rdiv is a div that just contains text, with no styling except width.</p>
  
  <p>What I was hoping was -- the overlay image would pop up in the top left corner of rdiv, overlaying the text.  What actually happens is, the overlay image appears below the text, exactly as you would expect for a block element inserted after the text.  Giving rdiv a positioning of absolute or relative doesn't help.</p>
  
  <p>Can it be done to have the overlay div appear on top of the text in the upper left corner?  Actually never mind -- just figured out that if rdiv is positioned relative and overlay is absolute it works.  Question could be deleted.</p>