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. bjwc Day2 玄学

    早晨起来很开心,因为昨天跟妹子聊天聊到很晚 然后看到了题,感觉:这tm才是冬令营呀! T1构造,并没有找到性质,暴力都懒得打 T2数位dp,状态比较麻烦,看来跟dmy想到一起了,然后搞一下搞完 T3放 ...

  2. HihoCoder1654: XY游戏（[Offer收割]编程练习赛39）（好久没写搜索）（已经超级简短了）

    描述 如下图所示,在4x4的棋盘上有X和Y两种棋子各若干枚:O表示空格. OXXY YOOX XOOY XOXX 小Hi每次可以选择任意一枚棋子,将它移动到上下左右相邻的空格中. 小Hi想知道最少移动 ...

  3. 作业3rd

    第三周作业 课本学习 使用nmap扫描特定靶机 使用nessus扫描特定靶机 靶机网络情况如下 在攻击机使用Nessus,步骤如下 新建一个扫描 填入目的主机ip,点击开始进行扫描 等待 扫描结果如下 ...

  4. ambari 维护模式及reset API 操作

    Ambari 的维护模式(Maintenance Mode)介绍 Ambari 提供的 Maintenance Mode,是为了让用户在调试或者维护 Service 的时候,抑制不必要的告警(Aler ...

  5. Java网络与多线程系列之1：实现一个简单的对象池

    前言 为什么要从对象池开始呢,先从一个网络IO操作的demo说起 比如下面这段代码,显而易见已经在代码中使用了一个固定大小的线程池,所以现在的重点在实现Runnble接口的匿名对象上,这个对象每次创建 ...

  6. poj2584T-Shirt——网络最大流

    题目:http://poj.org/problem?id=2584 以人和衣服作为点,建立超级源点和超级汇点,人连边权为1的边,衣服对源点连边权为件数的边(别弄乱顺序): 试图写构造函数,但CE了,最 ...

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

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

  8. mongodb启动脚本

    #!/bin/sh # #chkconfig: #description: mongodb start() { /usr/local/yunshipei/enterplorer/mongodb/bin ...

  9. huipengly的2018年度总结

    一.技术 1.入门C++ 今年看完了一本很厚很厚的书——<c++ primer 5th>.从头到尾,基本上每一个课后练习题都完成了.入门了C++这个大坑,也初步了解了面向对象这个程序抽象方 ...

  10. 《剑指offer》面试题8—旋转数组的最小数字

    题目:把一个数组最开始的若干个元素搬到数组末尾我们称之为数组的旋转.要求:输入一个递增排序的数组的旋转,输出旋转数组中的最小数字.例如{3,4,5,1,2}是{1,2,3,4,5}的一个旋转,该数组的 ...