Positionnement dynamique à l'intérieur de div relatif

Question

J'essaie d'obtenir un widget javascript de sélecteur de couleur travaillant dans une page avec un tas de "choses" dans ce que je ne peux pas changer. Une partie du "truc" fait que le sélecteur de couleurs apparaît bien en dessous du lien quand on clique dessus. Je l'ai réduit à un exemple simple ci-dessous. Ce qui est censé se produire est lorsque vous cliquez sur "lien 1", "div1" devrait se déplacer directement en dessous de "lien 1". Qu'est-ce qui se passe réellement, c'est que "div 1" apparaît bien en dessous de "lien 1". Si vous supprimez position: relative; de la définition CSS pour divMain, "div 1" est positionné correctement.

Comment est-ce que je peux placer "div 1" directement sous "lien 1" sans enlever 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>

Answer 1

La position de la div est par rapport au récipient la plus intérieure avec son ensemble de position. Donc dans ce cas, il finit 200px vers la droite et vers le bas à partir de divMain. Sans position définie sur divMain, elle est positionnée par rapport au corps.

Si vous le souhaitez juste en dessous du lien, placez link1 et div1 dans un élément avec position. changer donc à ceci:

<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> 

(Notez que je pop par 16px encore, de le mettre sous le lien.)

Cela signifie donc maintenant que div1 est 0px, 16px de la div I ajouté, plutôt que de divMain.