說(shuō)坐標(biāo)就要考慮參考點(diǎn)，首先要理解獲取元素坐標(biāo)是以文檔(html元素)的左上角為參考點(diǎn),不是瀏覽器左上角
案例分析
<div id="testid" style="border:solid 10px red; width:400px; height:200px; position:relative; overflow:auto; ">
   testid
  <div id="testid1" style="border:solid 5px green; position:absolute; width:200px; height:300px; top:70px; left:100px ">
   testid1
  </div>
</div>
<input type="button" value="點(diǎn)擊案例1" onclick="eyejsTest('testid1')"  />
<input type="button" value="點(diǎn)擊案例2" onclick="eyejsTest2('testid1')"  />
<input type="button" value="點(diǎn)擊案例3" onclick="eyejsTest3('testid1')"  />
----------------------------------------
第一種方法eyejsGetNode1，是很常用的方法，可這種寫法在某些情況下是不對(duì)的
  準(zhǔn)確地說(shuō)只能應(yīng)用在該元素和所有的父級(jí)節(jié)點(diǎn)不能有邊框和滾動(dòng),否則獲取到的坐標(biāo)就是不正確的
   必需準(zhǔn)確地理解offsetTop和offsetLeft, 以offsetTop為例，offsetTop是本元素的外側(cè)到直接父級(jí)的內(nèi)側(cè)的距離(如果有滾動(dòng)部分,包括滾動(dòng)部分)
 請(qǐng)看詳解offsetTop,offsetLeft,offsetParent并給于案例
<script type="text/javascript">
function $(id){return document.getElementById(id);}
var eyejsGetNode1=function(id){
   var obj=$(id);
   var pos =[];
   pos =[obj.offsetLeft,obj.offsetTop];//
   var parent = obj.offsetParent;    
   while(parent){ 
       pos[0] += parent.offsetLeft;
       pos[1] += parent.offsetTop;
       parent=parent.offsetParent;
   } 
   return {x:pos[0],y:pos[1]};
}
var eyejsTest=function(id){
   var node=eyejsGetNode1(id);
    alert("Y坐標(biāo)"+node.y);
}
</script>
點(diǎn)擊彈出元素的坐標(biāo),再滾動(dòng)后，再點(diǎn)擊彈出元素的坐標(biāo)
可以發(fā)現(xiàn):該元素的已經(jīng)發(fā)現(xiàn)變化坐標(biāo), 可計(jì)算結(jié)果并沒(méi)有變化,(應(yīng)該減去滾動(dòng)部分)
<div style="margin-top:20px; border-top:solid 1px red; width:500px;">案例二</div>
<script type="text/javascript">
/*方法二：彌補(bǔ)方法一的缺點(diǎn)  加上邊框部分和除去元素滾動(dòng)部分，但不能除去body滾動(dòng)部分*/
var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};
var isIE = (document.all) ? true : false;
if(!isIE){
    HTMLElement.prototype.__defineGetter__("currentStyle", function () {
        return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });
}
var eyejsGetNode2=function(id){
   var obj=$(id);
   var x=0,y=0;
   var scrollX=0,scrollY=0;
   if(obj.offsetParent){
     if( obj.offsetParent.tagName.toLowerCase()!="body"&&obj.offsetParent.tagName.toLowerCase()!="html" ){
       scrollX=obj.offsetParent.scrollLeft;
       scrollY=obj.offsetParent.scrollTop;
       //去掉元素滾動(dòng)部分，但是不能除掉html或body的滾動(dòng)部分,理解obj.offsetParent的指向哪個(gè)元素，最頂級(jí)的父級(jí)元素是IE是HTMLhtmlElement而
       //FF是HTMLbodyElement 因此要這樣判斷
     }
   }
   x+=obj.offsetLeft-scrollX;
   y+=obj.offsetTop-scrollY;
   while(obj=obj.offsetParent){
      scrollX=0;scrollY=0;
      var borderLeftWidth=0;
      var borderTopWidth=0;
      if(obj.tagName.toLowerCase()!="body"||obj.tagName.toLowerCase()!="html"){
         borderLeftWidth=!isNaN(parseInt(obj.currentStyle.borderLeftWidth))?parseInt(obj.currentStyle.borderLeftWidth):0;
         borderTopWidth=!isNaN(parseInt(obj.currentStyle.borderTopWidth))?parseInt(obj.currentStyle.borderTopWidth):0;
      }
      if(obj.offsetParent){
         if( obj.offsetParent.tagName.toLowerCase()!="body"&&obj.offsetParent.tagName.toLowerCase()!="html" ){
           scrollX=obj.offsetParent.scrollLeft;
           scrollY=obj.offsetParent.scrollTop;
         }
      }
      //alert(obj.offsetParent);
      x+=obj.offsetLeft+borderLeftWidth-scrollX;
      y+=obj.offsetTop+borderTopWidth-scrollY;
      if(obj.tagName.toLowerCase()=="html")
        break;
   }
   return {"x":x,"y":y};
}
var eyejsTest2=function(id){
   var node=eyejsGetNode2(id);
   alert("Y坐標(biāo)"+node.y);
}
</script>
<div>
點(diǎn)擊彈出元素的坐標(biāo),再滾動(dòng)后，再點(diǎn)擊彈出元素的坐標(biāo)
可以發(fā)現(xiàn):該元素的已經(jīng)發(fā)現(xiàn)變化坐標(biāo), 計(jì)算結(jié)果也著隨變化
但是你如果先放在IE下測(cè)試，再放在FF測(cè)試你會(huì)發(fā)現(xiàn)結(jié)果不一樣
為什么呢？去掉ID為testid的元素的邊框樣式，再試試，會(huì)發(fā)現(xiàn)結(jié)果一樣了
<div>
</div>
----
案例三:
利用瀏覽器內(nèi)置的獲取元素坐標(biāo)函數(shù)getBoundingClientRect
//此方法在IE和Firefox/3.0.12版本下通過(guò)
<script type="text/javascript">
var eyejsGetNode3=function(id){
   var el=$(id);
   var pos =[];
   var box=null;
   if(el.getBoundingClientRect){
      box = el.getBoundingClientRect();
      var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        return {x:box.left + scrollLeft, y:box.top + scrollTop}; //
   }
   return {x:0,y:0};
}
var eyejsTest3=function(id){
   var node=eyejsGetNode3(id);
    alert("Y坐標(biāo)"+node.y);
}
</script>
案例下載地址： http://www.eyejs.com/html/66/n-166.html