0

我创建了一个新的 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 默认移动到图像的左侧。

对于所有图像，包括<ul>.

4

3 回答 3

2

使用relative位置而不是absolute 

divLink.style.position = "relative";
于 2013-06-19T06:25:31.387 回答
0

如果您添加 poition:absolute 并提及 top/left/right/bottom ，则元素往往会相互堆叠。

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

1>不要分配任何位置。让它保持“静态”。使用边距属性移动“图像”。

例如： 

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

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

于 2013-06-19T06:54:34.770 回答
0

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

  divLink.style.margin-top = "10px";
  divLink.style.margin-right= "10px";
于 2013-06-19T06:58:57.570 回答