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. Mybatis中的like模糊查询

    1.  参数中直接加入%% param.setUsername("%CD%");      param.setPassword("%11%"); <sel ...

  2. Linux_服务器_02_在linux上怎么看eclipse控制台输出语句

    在windows下,tomcat启动之后有一个黑窗口,很容易看到System.out.println或ex.printStackTrace这样的函数输出,非常方便调试,但是在linux下,没有这样的窗 ...

  3. Posix线程编程指南(2)

    这是一个关于Posix线程编程的专栏.作者在阐明概念的基础上,将向您详细讲述Posix线程库API.本文是第2篇将向您讲述线程的创建与取消. 一．概念及作用在单线程程序中,我们经常要用到"全 ...

  4. 解决系统存在大量TIME_WAIT状态的连接

    系统存在大量TIME_WAIT状态的连接,通过调整内核参数解决, vi /etc/sysctl.conf 编辑文件,加入以下内容:net.ipv4.tcp_syncookies = 1net.ipv4 ...

  5. CodeForces - 311B:Cats Transport (DP+斜率优化)

    Zxr960115 is owner of a large farm. He feeds m cute cats and employs p feeders. There's a straight r ...

  6. kubectl工具管理应用生命周期

    ######kubectl管理工具###### [root@k8s-master dashboard]# kubectl get pod NAME READY STATUS RESTARTS AGE ...

  7. 1034 Head of a Gang (30)（30 分）

    One way that the police finds the head of a gang is to check people's phone calls. If there is a pho ...

  8. P2463 [SDOI2008]Sandy的卡片[差分+串拼接后缀数组]

    P2463 [SDOI2008]Sandy的卡片 套路都差不多,都是差分后二分答案找lcp.只是这题要把多个串拼接起来成为一个大串,中间用某些值域中没有的数字相隔(最好间隔符都不一样想想为什么),排序 ...

  9. codevs2821 天使之城

    传送门 2821 天使之城  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 天使城有一个火车站,每辆火车都从A方向驶入车站 ...

  10. POJ2186(有向图缩点)

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 28379   Accepted: 11488 De ...