Question

我创建了一个新的div并将其添加到页面上的所有图像中，如下所示：

var images = document.getElementsByTagName('img');
        for (var i = 0; i < 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] );
}

这适用于<ul>中包含的图像以外的所有图像。对于这些图像，每个divLink都移动到<ul>的右侧并堆叠在一起。如果我删除divLink.style.right = "10px"; divLink默认移动到图像的左侧。

如何将divLink放置在图像的右上角，包括<ul>中的所有图像。

Answer 1

使用relative位置代替absolute

divLink.style.position = "relative";

Answer 2

如果添加poistion：absolute并提及top / left / right / bottom，则元素会相互堆叠。

有两种方法可以做到这一点：

1＆GT;不要指定任何位置。让它保持“静态”。使用边距属性移动“图像”。

例如：

 divLink.style.margin-top = "10px";
 divLink.style.margin-right= "10px";
        OR

2 - ;只做位置：绝对而不提及顶部/左/右/底部属性，这样它们就不会相互堆叠。除非您不想使用top / left显式移动“图像”，否则这是没用的。

Answer 3

似乎没有必要给出位置：绝对的图像。您可以简单地附加图像而不给出位置属性，并使用margin属性移动图像。

  divLink.style.margin-top = "10px";
  divLink.style.margin-right= "10px";

JavaScript对图像元素的绝对位置

3 个答案: