I am trying to overlay text onto a hyperlinked image which has been dynamically created using the document.createElement() function. However, even with an absolute position of left: 0px and top: 0px, the text keeps appearing below the image, and not at the top, left corner as it should:

    //mainDiv is a container to hold all the hyperlinked images
    for (i = 0; i < 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);
    }

The only problem is the positioning of the text div, imgLabel.

Here's a simplified example of the issue on jsFiddle: /

block & inline-block does not work: /

I am trying to overlay text onto a hyperlinked image which has been dynamically created using the document.createElement() function. However, even with an absolute position of left: 0px and top: 0px, the text keeps appearing below the image, and not at the top, left corner as it should:

    //mainDiv is a container to hold all the hyperlinked images
    for (i = 0; i < 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);
    }

The only problem is the positioning of the text div, imgLabel.

Here's a simplified example of the issue on jsFiddle: http://jsfiddle/mPL3q/1/

block & inline-block does not work: http://jsfiddle/MwjXV/

• javascript
• html
• dom

• what do you mean by overlaid text? can you add more details? or create a fiddle? – Vedant Terkar Commented Jul 9, 2014 at 17:03
• try to show us your example in a fiddle please – MickyScion Commented Jul 9, 2014 at 17:04
• To display some text over the image. – iSofia Commented Jul 9, 2014 at 17:04
• use jsfiddle and put ALL your code there. there can be several reasons why this is happening. – Claudiu Creanga Commented Jul 9, 2014 at 17:12
• Try This: jsfiddle/mPL3q/6 – Vedant Terkar Commented Jul 9, 2014 at 17:36

2 Answers 2

1st solution

// label
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgLabel.style.margin = '0px';

// container    
imgContainer.style.position = "relative";
// tip: parent element of another element containing floated elements 
//      should have property overflow set to hidden
imgContainer.style.float = "left";
imgContainer.style.margin = "5px";

2nd solution

// label
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgLabel.style.margin = "0px";

// container        
imgContainer.style.display = "inline-block";
imgContainer.style.position = "relative";
// you will have gaps between the containers even if the margin is set to 0
imgContainer.style.margin = "0px";
// if you don't want these gaps, set margin-left to -5px (but not to the first element)
if(i !== 0){
    imgContainer.style.marginLeft = "-5px";
}

EDIT After analyzing your code...

// change <p> to <label>
imgLabel = document.createElement("label");
imgLabel.innerHTML = "Image " + i;
imgLabel.style.left = "0px";
// you don't need the next line ;)
//imgLabel.style.top = "0px";
imgLabel.style.color = "White";
imgLabel.style.position = "absolute";

1st jsFiddle | 2nd jsFiddle | 3rd jsFiddle

You can do this, add

img.style.zIndex="1";

and

imgLink.style.display = "block";

to their respective blocks

http://jsfiddle/mPL3q/8/

OR

if inline-block works for you then

imgContainer.style.display = "inline-block";

http://jsfiddle/mPL3q/7/