动态定位里面的相对格

我试图让一个颜色选择器JavaScript小部件工作在一堆“东西”，我不能改变的一个页面。一些“材料”导致颜色选择器在单击时显示在链接下方。我已经将它简化为下面的一个简单示例。动态定位里面的相对格

应该发生什么是当你点击“链接1”，“div1”应该直接移动到“链接1”下方。实际情况是，“div 1”远远低于“link 1”。如果您从divMain的CSS定义中删除position: relative;，则“div 1”的位置正确。

如何在不移除position: relative;的情况下将“div 1”直接放置在“link 1”下面？

function setPos(aname, dname) { 
 
    var o = document.getElementById(aname); 
 
    var ol = o.offsetLeft; 
 
    while ((o = o.offsetParent) != null) { 
 
    ol += o.offsetLeft; 
 
    } 
 
    o = document.getElementById(aname); 
 
    var ot = o.offsetTop + 25; 
 
    while ((o = o.offsetParent) != null) { 
 
    ot += o.offsetTop; 
 
    } 
 
    document.getElementById(dname).style.left = ol + "px"; 
 
    document.getElementById(dname).style.top = ot + "px"; 
 
}

h1 { 
 
    height: 50px; 
 
} 
 

 
#divMain { 
 
    position: relative; 
 
}

<h1></h1> 
 
<div id="divMain"> 
 
    <a href="#" onClick="setPos('link1','div1');return false;" name="link1" id="link1">link 1</a> 
 
    <div id="div1" style="position:absolute;border-style:solid;left:200px;top:200px;">div 1</div> 
 
</div>

来源

2010-04-30 ian

在div的位置是相对于与它的位置集合中的最里面的容器。所以在这种情况下，它将从divMain向右和向下结束200px。没有在divMain上设置位置，它相对于body定位。

如果你想要在链接的正下方，把link1和div1都放在一个带有位置的元素中。所以改成这样：

<div id="divMain"> 
    <div style="position:relative;"> 
     <a href="#" onClick="setPos('link1','div1');return false;" name="link1" id="link1">link 1</a> 
     <div id="div1" style="position:absolute;border-style:solid;left:0px;top:16px;">div 1</div> 
    </div> 
</div>

（请注意，我流行下来的16px的是，把它下面的链接。）

所以现在这意味着DIV1是0像素，从DIV我16px的补充，而不是从divMain。

来源

2010-04-30 23:05:11 Ipsquiggle

动态定位里面的相对格

回答

相关问题