title: Absolute positioning for dynamically created elements
body: <p>I am trying to overlay text onto a hyperlinked image which has been dynamically created using the <em>document.createElement()</em> function. However, even with an absolute position of <em>left: 0px</em> and <em>top: 0px</em>, the text keeps appearing below the image, and not at the top, left corner as it should:</p>
  
  <pre><code>    //mainDiv is a container to hold all the hyperlinked images
      for (i = 0; i &lt; imgArray.length; i++)
      {
          img = document.createElement("img");
          img.src = imgArray[i].src;
          img.style.width = imgArray[i].wdth;
          img.style.height = "auto";
  
          imgLink = document.createElement("a");
          imgLink.href = imgArray[i].url;
          imgLink.appendChild(img);
  
          imgLabel = document.createElement("p");
          imgLabel.innerHTML = imgArray[i].desc;
          imgLabel.style.position = "absolute";
          imgLabel.style.top = "0px";
          imgLabel.style.left = "0px";
  
          imgContainer = document.createElement("div");
          imgContainer.style.display = "inline";
          imgContainer.style.position = "relative";
  
          imgContainer.appendChild(imgLabel);
          imgContainer.appendChild(imgLink);
          mainDiv.appendChild(imgContainer);
      }
  </code></pre>
  
  <p>The only problem is the positioning of the text div, <em>imgLabel</em>.</p>
  
  <p><strong><em>Here's a simplified example of the issue on jsFiddle:</em></strong> <a href="http://jsfiddle.net/mPL3q/1/" rel="nofollow">http://jsfiddle.net/mPL3q/1/</a></p>
  
  <p><strong><em>block &amp; inline-block does not work:</em></strong> <a href="http://jsfiddle.net/MwjXV/" rel="nofollow">http://jsfiddle.net/MwjXV/</a></p>