Absolute positioning for dynamically created elements

Question

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.net/mPL3q/1/

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

Solution 1

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

Solution 2

You can do this, add

img.style.zIndex="1";

and

imgLink.style.display = "block";

to their respective blocks

http://jsfiddle.net/mPL3q/8/

OR

if inline-block works for you then

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

http://jsfiddle.net/mPL3q/7/

Comments

[iSofia]

The container element is set to position: relative and the label element is set to position: absolute with 0 margins. However, if the container element is not displayed inline, the hyperlinked images will appear vertically, and not side by side.

[iSofia]

For some reason, using block or inline-block for the link element or the container element prevents the images from being displayed side by side.

[Huangism]

You are going to have to post more of your code then

[Huangism]

jsfiddle.net/mPL3q/13 I see them in one line as long as the width of the frame is large enough to fit them. Are you not seeing it?

[hex494D49]

@iSofia I added another solution, so choose :)

[iSofia]

The best solution is clearly display: inline-block; thank you hex494D49, for your tireless help. However, it does not seem to work in my implementation, where all metrics are based on percentages. I've added a little more detail to my example; it's supposed to be an image scroller, where the images are added dynamically, and their sizes are not known beforehand. new jsFiddle: jsfiddle.net/MwjXV

[iSofia]

Yes, you're right; thank you. Unfortunately, it does not seem to work the same when the metrics are percentage-based. I've posted an expanded example. The images are added dynamically and their sizes are not known beforehand. new jsFiddle: jsfiddle.net/MwjXV

[hex494D49]

@iSofia I see. I'll fix it in a meantime and drop you a message.

[iSofia]

That would be great; thank you hex494D49. I believe that it has to do with the percentage sizes being inherited from the parent divs, and the parent divs not having any fixed sizing during dynamic creation with document.createElement(). That's probably why the div collapses when set to display: inline-block. But I just can't seem to structure it right.

[hex494D49]

@iSofia Check the updated answer and follow the 3rd jFiddle. I believe it's what you're looking for... and let me know if it is :)

[iSofia]

Wow! Label seems to work as expected. Would you happen to know why the top attribute isn't quite proportionate? Even setting it to 1px pushes it all the way to the bottom. And again, thank you.

[hex494D49]

@iSofia Oh, I see the answer isn't yes accepted hahaha. Well, honestly I'm not sure why the top property shouldn't be used in this case - since the whole web is a mystery sometimes I just follow the instincts. But I'll check it out in the meantime and let you know :)

[iSofia]

Oversight on my part; it's done now, with gratitude I might add. I'll try and look into the label mystery as well, but would still love to hear from you if you find anything out. Thanks a whole lot!