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. 第三届蓝桥杯预赛c++b组

    1.微生物增值 假设有两种微生物 X 和 Y     X出生后每隔3分钟分裂一次(数目加倍),Y出生后每隔2分钟分裂一次(数目加倍).     一个新出生的X,半分钟之后吃掉1个Y,并且,从此开始,每 ...

  2. ES索引瘦身 禁用_source后需要设置field store才能获取数据 否则无法显示搜索结果

    在默认情况下,开启_all和_source 这样索引下来,占用空间很大. 根据我们单位的情况,我觉得可以将需要的字段保存在_all中,然后使用IK分词以备查询,其余的字段,则不存储. 并且禁用_sou ...

  3. Java企业微信开发_10_未验证域名归属，JS-SDK功能受限

    1.现象: 在企业微信后台填写可信域名后,提示:未验证域名归属,JS-SDK功能受限,如下图: 点击“申请域名校验”后, 注意:域名根目录 当时一直不清楚这个域名根目录在哪里,最后让我给试出来了 2. ...

  4. struts2框架xml验证

    struts2验证分为3步: 1.获取需要验证的信息,使用同名属性,提供getter,setter方法.然后框架使用反射将值自动注入. 2.对信息进行验证,成功失败作出对应的选择. xml验证和手动验 ...

  5. elasticsearch-installation

    1. 安装Java JDK 移步 :sdfa 2. 下载elasticsearch url : https://artifacts.elastic.co/downloads/elasticsearch ...

  6. C# Linq 取得两个列表的交集

    我们经常会用到linq 来查询 一个数组中和另一个数组中相同的项, 这个时候就会用到IEqualityComparer接口. public class StudyInfoModel {      pu ...

  7. struts2的使用知识点

    最开始学习java的时候学习过struts,但是对配置和struts的理解深度不够,现在工作虽然再用,但是自己搭建环境和使用心得始终很零散,所以现在决定重新理一遍,有条理的学习一下struts. 至于 ...

  8. 演讲：对 2000 多亿条数据做一次 group by 需要多久？

    http://2017.qconbeijing.com/presentation/646?utm_source=weibo&utm_medium=infoq&utm_campaign= ...

  9. PCL类的设计结构

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=243 类和应用程序接口 对于PCL的大多数类而言,调用接口(所有public ...

  10. linux&nbsp;ip地址自动获取,ip地址…

    linux ip地址自动获取,ip地址手动设置(图文解释) 2011-04-19 16:19:31| 分类: 服务器(appache/n | 标签: |字号大中小 订阅 linux ip地址自动获取( ...