网上百度都有的说明是

offset():获取匹配元素在当前视口的相对偏移。

position():获取匹配元素相对父元素的偏移。

如果单纯写这两句话，这个博客毫无意义

这里我写下他俩的使用情况，希望对各位看官有所帮助

（下面两行是鄙人的搪塞解释，不喜欢长篇大论的可以跳过直接看后面例子）

offset(),根据定义，相对视口的距离，视口也就是整个文档，那么元素也就是脱离文档流的，那拿拖拽来说，如果拖拽的对象定位是fixed，则用ta

position(),获取相对父元素的偏移，也就是说元素在文档内，那拿拖拽来说，如果拖拽的对象定位不是fixed（包括static,relative,absolute），则用ta

具体例子（目前正在写的一个项目 详情请猛戳https://github.com/mfx55/drawingBoard）

这个颜色选择器拖拽时候就用offset()来获取拖拽后的位置

部分代码截图

这个透明度选择器，是相对于透明度那个框定位的，所以这里用position（）

部分代码截图

总结：

offset（）：获取定位为fixed的元素的位置

position（）：获取定位为static，absolute，relative的元素的位置

offset()和position()的更多相关文章

  1. jquery offset() 与position()方法的区别

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  2. 区分jquery中的offset和position

    一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...

  3. .offset()与.position()区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下:   offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...

  4. jQuery获得元素位置offset()和position()的区别

    jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...

  5. 关于jQuery中的 offset() 和 position() 的用法

    ---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...

  6. 关于jQuery中的offset()和position()

    在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该 ...

  7. Jquery中的offset()和position()深入剖析(元素定位)

    先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...

  8. Jquery中的offset()和position()深入剖析

    jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...

  9. offset()与position()的区别

    jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...

  10. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

随机推荐

  1. LeetCode OJ：Swap Nodes in Pairs（成对交换节点）

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  2. C++编译错误：multiple types in one declaration

    这是在使用QT的时候看到的.这种情况往往是结构体或者是class最后少加了一个分好,加上即可,这个bug找了我好久,mark一下.

  3. LeetCode OJ：Restore IP Addresses（存储IP地址）

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  4. 【python常见面试题】之python 中对list去重的多种方法

    在python相关职位的面试过程中,会对列表list的去重进行考察.(注意有时会要求保证去重的顺序性) 1.直观方法 li=[1,2,3,4,5,1,2,3] new_li=[] for i in l ...

  5. SpringAnnotation注解之@Autowired

    @Autowired:自动装配,不用在bean里写<property>属性来指定所依赖的属性 1 2 3 4 @Autowired public void setUserDao(UserD ...

  6. php获取当前日期开始一周日期与星期几

    不说了,对于PHPer来说,写不出来说什么都是白瞎,不喜勿喷~~~~ function get_week(){ $data = []; $format='Y-m-d'; for ($i=0; $i&l ...

  7. Python中的单例设计模式

    1)设计模式: 是前人工作的总结和提炼.通常,被人们广泛流传的设计模式.     某一问题的特定解决方案,使用设计模式是为了可重用代码,是代码更容易被人理解, 增加代码的可用性. 2)单例设计模式: ...

  8. EasyPusher安卓直播推流到EasyDarwin开源流媒体服务器工程简析

    EasyPusher主要有三部分组件组成:采集,编码,叠加,上传.在这个基础上同时支持本地存储\后台预览的功能.主要业务模块与相关类之间的关系如图所示: Created with Raphaël 2. ...

  9. .NET 方法回调

    使用 AsyncCallback 委托在一个单独的线程中处理异步操作的结果. AsyncCallback 委托表示在异步操作完成时调用的回调方法. 回调方法采用 IAsyncResult 参数,该参数 ...

  10. 从小白开始学习iOS开发

    从事iOS开发不经意间,已经两年过去了,记得当初看到OC是,我根本就不知道那些个东西是什么?从开始学习开机,到一个个英文开始,为了能找到工作,愣是耐下心去坚持看下去. 现在回想起来,很是庆幸我没有放弃 ...