Fatal编程技术网
  • javascript/
  • JavaScript元素在图像上的绝对位置

JavaScript元素在图像上的绝对位置

javascript

JavaScript元素在图像上的绝对位置,javascript,Javascript,我创建了一个新的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 = "1

我创建了一个新的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] );
}

var images=document.getElementsByTagName（'img'）；
对于（var i=0；i
这适用于除
中包含的图像之外的所有图像。对于这些图像，每个divLink都被移动到
的右侧，并堆叠在另一个上面。如果我删除
divLink.style.right=“10px”默认情况下，divLink移动到图像的左侧


对于所有图像（包括
中的图像），如何将divLink定位到图像的右上角？请使用
相对位置，而不是
绝对位置


divLink.style.position = "relative";  



如果添加position:absolute并提到top/left/right/bottom，则元素倾向于彼此堆叠

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

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

例如：


2> 仅设置位置：绝对，不提及顶部/左侧/右侧/底部属性，这样它们就不会相互堆叠。除非您不想使用上/左显式移动“图像”，否则这是没有用的。
似乎没有必要为图像指定位置：绝对。
您可以简单地附加图像，而不提供位置属性，并使用边距属性移动图像


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



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