Javascript 动态创建元素的绝对定位

我正在尝试将文本覆盖到超链接图像上，该图像是使用document.createElement（）函数动态创建的。但是，即使绝对位置为left:0px和top:0px，文本仍会显示在图像下方，而不是应该显示在左上角：

    //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);
    }

//mainDiv是保存所有超链接图像的容器
对于（i=0；i

唯一的问题是文本div imgLabel的位置

这里有一个关于JSFIDLE问题的简化示例：

块和内联块不起作用：

第一个解决方案

// 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";

第二种解决方案

// 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";
}

分析代码后编辑

// 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";

//将更改为
imgLabel=document.createElement（“标签”）；
imgLabel.innerHTML=“Image”+i；
imgLabel.style.left=“0px”；
//您不需要下一行；）
//imgLabel.style.top=“0px”；
imgLabel.style.color=“白色”；
imgLabel.style.position=“绝对”；

| |

第一种解决方案

// 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";

第二种解决方案

// 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";
}

分析代码后编辑

// 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";

//将更改为
imgLabel=document.createElement（“标签”）；
imgLabel.innerHTML=“Image”+i；
imgLabel.style.left=“0px”；
//您不需要下一行；）
//imgLabel.style.top=“0px”；
imgLabel.style.color=“白色”；
imgLabel.style.position=“绝对”；

| |

您可以这样做，添加

img.style.zIndex="1";

及

到各自的街区

或

如果

内联块

适合您，则

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

您可以这样做，添加

img.style.zIndex="1";

及

到各自的街区

或

如果

内联块

适合您，则

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

---

---

你所说的覆盖文本是什么意思？你能补充更多细节吗？或者创建一个提琴？请尝试用提琴向我们展示您的示例，以便在图像上显示一些文本。使用jsfiddle.net并将所有代码放在那里。发生这种情况的原因可能有很多。试试看：你所说的覆盖文本是什么意思？你能补充更多细节吗？或者创建一个提琴？请尝试用提琴向我们展示您的示例，以便在图像上显示一些文本。使用jsfiddle.net并将所有代码放在那里。出现这种情况的原因可能有多种。请尝试以下操作：容器元素设置为position:relative，标签元素设置为position:absolute，边距为0。但是，如果容器元素没有内联显示，超链接图像将垂直显示，而不是并排显示。@iSofia I添加了另一个解决方案，因此选择：）最好的解决方案是清晰显示：内联块；谢谢你的不懈帮助。然而，在我的实现中，它似乎不起作用，在我的实现中，所有指标都基于百分比。我在我的示例中添加了更多的细节；它应该是一个图像滚动器，图像是动态添加的，它们的大小事先不知道。新的JSFIDLE:@iSofia我明白了。我会在这段时间把它修好，然后给你留言。那太好了；谢谢你。我认为这与从父div继承的百分比大小有关，并且父div在使用document.createElement（）动态创建期间没有任何固定大小。这可能就是div在设置为display:inline block时崩溃的原因。但我似乎无法正确地构造它。容器元素设置为position:relative，标签元素设置为position:absolute，边距为0。但是，如果容器元素没有内联显示，超链接图像将垂直显示，而不是并排显示。@iSofia I添加了另一个解决方案，因此选择：）最好的解决方案是清晰显示：内联块；谢谢你的不懈帮助。然而，在我的实现中，它似乎不起作用，在我的实现中，所有指标都基于百分比。我在我的示例中添加了更多的细节；它应该是一个图像滚动器，图像是动态添加的，它们的大小事先不知道。新的JSFIDLE:@iSofia我明白了。我会在这段时间把它修好，然后给你留言。那太好了；谢谢你。我认为这与从父div继承的百分比大小有关，并且父div在使用document.createElement（）动态创建期间没有任何固定大小。这可能就是div在设置为display:inline block时崩溃的原因。但我似乎无法正确地组织它。出于某种原因，对link元素或container元素使用block或inline block可以防止图像并排显示。您必须发布更多代码，然后我才能在一行中看到它们，只要框架的宽度足够大，可以容纳它们。你没看到吗？是的，你是对的；非常感谢。不幸的是，当度量是基于百分比的时，它似乎不起同样的作用。我发布了一个扩展的示例。图像是动态添加的，它们的大小事先不知道。新的JSFIDLE：出于某种原因，对link元素或container元素使用block或inline block可以防止图像并排显示