jQuery 中有兩個獲取元素位置的方法offset()和position()，這兩個方法之間有什麼異同html
offset():jquery
獲取匹配元素在當前視口的相對偏移。post
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。
.offset()方法能夠讓咱們從新設置元素的位置。這個元素的位置是相對於document對象的。若是對象原先的position樣式屬性是 static的話，會被改爲relative來實現重定位。ui
position():this
獲取匹配元素相對父元素的偏移。url
返回的對象包含兩個整形屬性：top 和 left。爲精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。spa
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/ Get *real* offsetParent
var
offsetParent =
this
.offsetParent(),
// Get correct offsets
offset =
this
.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num(
this
, ’marginTop’ );
offset.left -= num(
this
, ’marginLeft’ );
// Add offsetParent borders
parentOffset.top += num( offsetParent, ’borderTopWidth’ );
parentOffset.left += num( offsetParent, ’borderLeftWidth’ );
// Subtract the two offsets
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};
|
使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素至關於最近的一個擁有絕對或者相對定位的父元素的偏移位置。
使用position()方法時若是其全部的父元素都爲默認定位（static）方式，則其處理方式和offset()同樣，是當前窗口的相對偏移
使用offset()方法無論該元素如何定位，也無論其父元素如何定位，都是獲取的該元素相對於當前視口的偏移
例如：要顯示的元素存放在DOM的最頂端或者最底端（即其父元素就是body），這時用offset()是最好的。code
轉自：http://www.popo4j.com/article/jQuery-absolute-relative-position.htmlhtm