jQuery方法position()與offset()區別

標籤：style   class   blog   c   code   java   

參考別人寫得比較明白的，紅色部分為重點吧：

使用jQuery擷取元素位置時，我們會使用position()或offset()方法，兩個方法都返回一個包含兩個屬性的對象－左邊距和上邊距，它們兩個的不同點在於位置的相對點不同。

可以看看下邊的圖：

我們可以大體看出兩者的區別。

position()擷取相對於它最近的具有相對位置(position:relative)的父級元素的距離，如果找不到這樣的元素，則返回相對於瀏覽器的距離。

offset()始終返回相對於瀏覽器文檔的距離，它會忽略外層元素

下邊看個簡單的例子，這裡外層的div元素(position:relative)僅一個：

<divid="outer"style="width:200px;position:relative;left:100px;"><divid="inner"style="position:absolute;left:50px;top:60px;"></div></div>

//擷取相對於最近的父級(position:relative)的位置var vposition = $("#inner").position();alert(vposition.left);//輸出：50alert(vposition.top);//輸出：60var voffset = $("#inner").offset();alert(voffset.left);//輸出：$("#outer").offset().left+50alert(voffset.top);//輸出：$("#outer").offset().top+60

在不同瀏覽器中,offset()得到的相對於瀏覽器的位置不同，相信你看了上邊相應的注釋，已經掌握了position()同offset()方法的區別。

原文：http://www.jquery001.com/position()-offset().html