offset()返回的是相对于当前文档的坐标，position()返回的是相对于其定位的祖辈元素的坐标。

使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移,此时如果子元素没有margin，则两者值相同，如果有margin，两者的差值就是子元素的margin值。

使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前窗口的偏移坐标

附上调试代码：

     <style>

         *{ margin:0; padding:0;}

         #parent{ position:relative; height: 300px; width: 300px; padding: 10px; margin:30px; background-color:#ccc; border: solid 10px #fbc;}

         #child{ height: 200px; width: 200px; padding: 10px; margin: 30px; border: 10px solid #fbc;background-color:#afb;}

     </style>

     <body>

         <div id="parent">

             <div id="child">

             </div>

         </div>

     </body>

     <script src="jquery_1.11.3.min.js"></script>

     <script>

         console.log( $("#child").offset().left);

         console.log( $("#child").position().left);

     </script>

注：此文为原创，如需转载请注明出处。

js和jq中常见的各种位置距离之offset()和position()的区别（二）的更多相关文章

  1. js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...

  2. js和jq中常见的各种位置距离之offset和offset()的区别（三）

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用o ...

  3. js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft （一）

    offsetLeft offsetTop offsetWidth offsetHeight offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元 ...

  4. HTML中常见的各种位置距离以及dom中的坐标讨论

    最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...

  5. jQuery获得元素位置offset()和position()的区别

    jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...

  6. Ajax 请求头中常见content-type

    四种常见的 POST 提交数据方式 HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范.规范把 HTTP 请求分为三个部分:状态行.请求头.消息主体.协议规定 POST ...

  7. jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr／val／text（）、jq.height/width、offset().／position().／scrol Left／Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存

    each 方法 $ ( selector).each(function( index,element) {  } );   参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...

  8. Jquery中的offset()和position()深入剖析

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  9. 关于jQuery中的offset()和position()

    在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该 ...

随机推荐

  1. L94

    Early-morning births are genetically programmed THE notion that nothing good happens after midnight ...

  2. hdu-5804 Price List(水题)

    题目链接: Price List Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 262144/131072 K (Java/Othe ...

  3. hdu-2586 How far away ？(lca+bfs+dfs+线段树)

    题目链接: How far away ? Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 32768/32768 K (Java/Ot ...

  4. HihoCoder1677 : 翻转字符串（Splay）（区间翻转）

    描述 给定一个字符串S,小Hi希望对S进行K次翻转操作. 每次翻转小Hi会指定两个整数Li和Ri,表示要将S[Li..Ri]进行翻转.(S下标从0开始,即S[0]是第一个字母) 例如对于S=" ...

  5. ACM学习历程—HDU 1059 Dividing（dp && 多重背包）

    Description Marsha and Bill own a collection of marbles. They want to split the collection among the ...

  6. Mesos和Marathon

    libz is required for mesos to build 需要安装zlib-devel-1.2.7-17.el7.x86_64.rpm   其实跨Shell的Profile文件同步只要执 ...

  7. 非常好的LINUX学习者博客

    http://blog.csdn.net/qq_21794823/article/category/6496200

  8. OpenCode：template

    ylbtech-OpenCode: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtec ...

  9. Divide Two Integers-不用'/' '*' '%'操作实现整数的除法

    题目描述: 不用 '*' '/' 和 '%' 运算实现两个整数的除法 题目来源:http://oj.leetcode.com/problems/divide-two-integers/ 题目分析: 例 ...

  10. caffe solver

    caffe solver https://groups.google.com/forum/#!topic/caffe-users/mUIi42aKWHQ https://github.com/BVLC ...