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. L83

    Kids Gulp 7 Trillion Calories Per Year Kids from the ages of 2 to 19, consume about seven trillion c ...

  2. python web server gateway interface (wsgi ) notes

    前言: 注:如果需要得到支持批Python3.x以及包含了勘误表,附录,和说明的更新版规范,请查看PEP 3333 摘要: 这篇文档详细说明了一套在web服务器与Python web应用程序(web框 ...

  3. ACM学习历程—FZU 2144 Shooting Game（计算几何 && 贪心 && 排序）

    Description Fat brother and Maze are playing a kind of special (hentai) game in the playground. (May ...

  4. ACM学习历程——HDU2227 Find the nondecreasing subsequences（线段树 && dp）

    Description How many nondecreasing subsequences can you find in the sequence S = {s1, s2, s3, ...., ...

  5. 【Lintcode】105.Copy List with Random Pointer

    题目: A linked list is given such that each node contains an additional random pointer which could poi ...

  6. 【LeetCode】040. Combination Sum II

    题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...

  7. echarts图表自适应

    当页面上只引入一个图表 window.onresize= () =>{ myEchart.resize() } 当引入多个时,上面的方法只会影响最后一个图表 window.addEventLis ...

  8. Godot-3D教程-02.3D性能和局限性

    介绍 Introduction Godot遵循表现与性能平衡信条.在这个表现的世界中,它们总是有许多约定俗成的东西,主要是在用执行速度换取可用性与扩展性方面.下面是一些实际的例子: 高效地渲染对象是比 ...

  9. 乱写的一个SQL框架

    闲来没事,看了mybatis的实现形式,就心血来潮的自己弄了一个仿照mybatis的框架,性能肯定不好,而且有很多问题,但是是一次有益的尝试 1.基本配置文件 <!--加载数据源--> & ...

  10. zk 05之：ZooKeeper的配置

    ZooKeeper 的功能特性通过 ZooKeeper 配置文件来进行控制管理( zoo.cfg 配置文件). ZooKeeper 这样的设计其实是有它自身的原因的.通过前面对 ZooKeeper 的 ...