Absolute positioning for dynamically created elements

dom, html, javascript

Solution

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

Problem

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/

Original source