title: div position changing when zooming browser
body: <p>I have a popup div, its working fine and gets popped up when i click a image, now when i zoom in or out, the popup div stays where it is as its position is absolute, when i am changing it to relative, its popping out at different place, the css and javascript are below:</p>
  
  <p><strong>css</strong></p>
  
  <pre><code>.set_pop{
                  position:absolute;
                  margin-right: 50px;
                  margin-top:10px;
                  width:100px;
                  -webkit-box-shadow: #666 0px 2px 3px;
                  -moz-box-shadow: #666 0px 2px 3px;
                  box-shadow: #666 0px 2px 3px;
                  border-radius:5px;
                  -moz-border-radius:5px;
                  -webkit-border-radius:5px;
                  z-index:10;
                  background-color: #ffffff;
                  color:#000;
              }
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code> $('.settings img').live('click', function(event){
                 event.stopPropagation();
                   var popup_div = $('.set_pop');
                  var obj = $(this);
                  var offset = obj.offset();
  
                  var new_top = offset.top + 30;
  
                  var new_left = offset.left;
  
                  new_left = new_left - ( popup_div.width() / 2);
                  new_left = new_left + ( obj.width() / 2);
  
                  popup_div.css('left', new_left + 'px');
                  popup_div.css('top', new_top + 'px');
  
                  popup_div.show();
              });
  </code></pre>
  
  <p>what i need is this div to reposition it self with the source of popup in my case its image, when i am zooming in/out</p>
  
  <p>thanks and regards</p>