popup window’s X and Y axis cannot mount to my page elemets

Apologize in advance as I’m a beginner on JS page developing. Now I got an original code from my team’s project. In the JSP page I got a link element:

<jhx:link id="ctryLink" url="javascript:displayDivSelect('selectOrigCtryDiv', ctryLink');">

When click the link, it will run the following function:

displayDivSelect = function (divId, linkId, fromOtherCg) {
   // retrieve the cache which map div id to popup window object
   var winCache = arguments.callee.winCache;
   if (!winCache) {
      winCache = {};
      arguments.callee.winCache = winCache;
   }
   // retrieve or create a popup window object
   var win = winCache[divId];
   if (!win) {
      win = new PopupWindow(divId);
      win.autoHide(); 
      win.setSize(15, 20);
      if (fromOtherCg) {
         win.offsetX = 0;
         win.offsetY = 15;
      } else {
         win.offsetX = -350;
         win.offsetY = -150;
      }
      winCache[divId] = win;
   }
   // show or hide div
   if (linkId) {
      win.showPopup(linkId);                         
      // set a background frame for given div to cover drop down list
      var div = document.getElementById(divId);
      var frame = document.getElementById("popupWindowFrame"); //using iframe work for old IE version
      frame.style.top = div.offsetTop;
      frame.style.left = div.offsetLeft; 
      frame.style.height = div.offsetHeight;
      frame.style.width = div.offsetWidth;
      frame.style.visibility = div.style.visibility;
      frame.style.display = div.style.display;
   } else {
      win.hidePopup();               
   }
};

And the showPopup function is:

function showPopup(anchorname)  {
        this.getXYposition(anchorname);
        this.x += this.offsetX;
    this.y += this.offsetY;
    if (this.divName != null) {
        // Show the DIV object
        if (this.use_gebi) {
            document.getElementById(this.divName).style.left = this.x + "px";
            document.getElementById(this.divName).style.top = this.y + "px";
            document.getElementById(this.divName).style.visibility = "visible";
            }
            /* other codes*/
}

My target is to make sure every time i click the link then a dropdown list will popup just under middle the link label,

so the code was trying to calculate the link element’s position so it can set some offsetX, Y and let the dropdown mount to the link label’s position and popup in the expected position.

Now i got the problem: when viewing the webpage in 100%, the dropdown position seems ok.
Then i close the dropdown, zoom in the webpage to 120% (or bigger, to 80% or smaller), click the link again, then the dropdown’s X,Y position will change and fly to somewhere else.

Tried a lot of method and no idea how & why, thanks for your time and help if you have any idea!

get root cause
get updated code