offset()返回的是相對於當前文檔的坐標，position()返回的是相對於其定位的祖輩元素的坐標。
使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素相當於最近的一個擁有絕對或者相對定位的父元素的偏移位置。
使用position()方法時如果其所有的父元素都為默認定位（static）方式，則其處理方式和offset()一樣，是當前窗口的相對偏移,此時如果子元素沒有margin，則兩者值相同，如果有margin，兩者的差值就是子元素的margin值。
使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是獲取的該元素相對於當前窗口的偏移坐標
附上調試代碼：
1 <style> 2 *{ margin:0; padding:0;} 3 #parent{ position:relative; height: 300px; width: 300px; padding: 10px; margin:30px; background-color:#ccc; border: solid 10px #fbc;} 4 #child{ height: 200px; width: 200px; padding: 10px; margin: 30px; border: 10px solid #fbc;background-color:#afb;} 5 </style> 6 <body> 7 <div id="parent"> 8 <div id="child"> 9 </div> 10 </div> 11 </body> 12 <script src="jquery_1.11.3.min.js"></script> 13 <script> 14 15 16 console.log( $("#child").offset().left); 17 console.log( $("#child").position().left); 18 </script>
注：此文為原創，如需轉載請注明出處。