動態定位裏面的相對格

我試圖讓一個顏色選擇器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

動態定位裏面的相對格

回答

相關問題