[英]Dynamic positioning inside relative div
我正在嘗試使顏色選擇器javascript小部件在頁面上工作,並且其中包含一堆我無法更改的“東西”。 單擊某些“材料”會使顏色選擇器顯示在鏈接下方。 我將其簡化為下面的簡單示例。
應該發生的是,當您單擊“鏈接1”時,“ div1”應直接移到“鏈接1”下方。 實際上發生的是“ div 1”出現在“ link 1”下方。 如果刪除position: relative;
從divMain
的CSS定義中,“ div 1”的位置正確。
如何在不刪除position: relative;
情況下將“ div 1”直接定位在“鏈接1”下方position: relative;
?
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>
div的位置相對於設置了其位置的最里面的容器。 因此,在這種情況下,它從divMain向右下方向下移動200px。 在divMain上未設置位置的情況下,它相對於主體定位。
如果要在鏈接正下方,請將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>
(請注意,我仍將其向下彈出16像素,以將其放置在鏈接下方。)
因此,這意味着現在div1從我添加的div(而不是divMain)開始為0px,16px。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.