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. Codeforces Gym 101190 NEERC 16 .D Delight for a Cat （上下界的费用流）

    ls是一个特别堕落的小朋友,对于n个连续的小时,他将要么睡觉要么打隔膜,一个小时内他不能既睡觉也打隔膜 ,因此一个小时内他只能选择睡觉或者打隔膜,当然他也必须选择睡觉或打隔膜,对于每一个小时,他选择睡 ...

  2. ACM学习历程——HDU1331 Function Run Fun（锻炼多维dp的打表）

    Description We all love recursion! Don't we?        Consider a three-parameter recursive function w( ...

  3. P1150 Peter的烟

    题目描述 Peter有n根烟,他每吸完一根烟就把烟蒂保存起来,k(k>1)个烟蒂可以换一个新的烟,那么Peter最终能吸到多少根烟呢? 输入输出格式 输入格式: 每组测试数据一行包括两个整数n( ...

  4. 理解I/O Completion Port(完成端口)

    欢迎阅读此篇IOCP教程.我将先给出IOCP的定义然后给出它的实现方法,最后剖析一个Echo程序来为您拨开IOCP的谜云,除去你心中对IOCP的烦恼.OK,但我不能保证你明白IOCP的一切,但我会尽我 ...

  5. 用PCA降维 （Principal Component Analysis，主成分分析)

    参考资料:Mastering Machine Learning With scikit-learn 降维致力于解决三类问题.第一,降维可以缓解维度灾难问题.第二,降维可以在压缩数据的同时让信息损失最 ...

  6. hdu 5730 Shell Necklace —— 分治FFT

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5730 DP式:\( f[i] = \sum\limits_{j=1}^{i} f[i-j] * a[j] ...

  7. json格式化插件

    插件名称:JSON-Handle 下载地址: http://jsonhandle.sinaapp.com/

  8. java 通过System.getProperties()获取系统参数

    转自:https://www.cnblogs.com/ksuifeng/archive/2010/09/25/1834416.html 1.java的System.getProperty()方法可以获 ...

  9. python脚本修改hosts文件

    用python3写了个修改hosts的小脚本,没有技术含量,顺带复习一下文件操作和os.sys模块的内容了. # -*- coding:utf-8 -*- #!/usr/bin/env python ...

  10. 利用JS函数制作时钟运行程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...