title: JavaScript absolute position of element on images
body: <p>I have created a new div and adding it to all images on the page as follows:</p>
  
  <pre><code>var images = document.getElementsByTagName('img');
          for (var i = 0; i &lt; images.length; i++) {    
  var divLink = document.createElement("div");
      divLink.style.position = "absolute"; divLink.style.top = "10px"; divLink.style.right = "10px"; divLink.style.zIndex="1"; divLink.style.fontSize = "20px"; divLink.style.backgroundColor = "black"; divLink.style.color = 'white';
      divLink.innerHTML = linkCount;
      images[i].parentNode.insertBefore(divLink, images[i] );
  }
  </code></pre>
  
  <p>This is working well for all images except images contained in a <code>&lt;ul&gt;</code>. For these images, each divLink is moved to the right of the <code>&lt;ul&gt;</code> and stacked on top of one another. If I remove the <code>divLink.style.right = "10px";</code> the divLink moves by default to the left of the image. </p>
  
  <p>How can I position the divLink to the top-right corner of the image, for all images including those in the <code>&lt;ul&gt;</code>.</p>