网上百度都有的说明是

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. 《Effective C++》第1章 让自己习惯C++-读书笔记

    章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...

  2. 学会使用postman模拟http请求(转)

    原文链接:http://www.cnblogs.com/mafly/p/postman.html 这个东西关键时刻还是有点用的.因为有些时候你和前端工作不协调的话,自己动手,丰衣足食.确定自己没问题是 ...

  3. New Concept English three (23)

    31w 45 People become quite illogical when they try to decide what can be eaten and what cannot be ea ...

  4. 初识jQuery(1)

    1.Jquery是对JavaScript对象和函数的封装(JavaScript框架) 2.怎么使用Jquery 第一步:把js文件放入项目中 第二步:在页面引用jquery <script ty ...

  5. React中利用axios来实现数据请求

    axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: 一.拦截器 有注释,不难理解,通常请求头参数不是写死的,应该是去浏览器中读的,例如,login之后返回toke ...

  6. three.js入门——先跑个旋转的正方体

    WebGl中文网看了几篇教程,又百度了几篇文章,顿时感觉手痒,打开编辑器,写个demo玩玩. demo是写在vue项目中的,所以首先: npm install three --save; npm in ...

  7. SpringMVC札集(08)——文件上传

    自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onL ...

  8. PHP中查看PHP基本信息

    1.PHP_BINARY:查看PHP执行exe文件路径 <?php echo PHP_BINARY; ?> E:\PHP\php-7.1.3-Win32-VC14-x64\php.exe ...

  9. dyld: lazy symbol binding failed: Symbol not found: ___sincosf_stret

    This is the error I get: dyld: lazy symbol binding failed: Symbol not found: ___sincosf_stret Refere ...

  10. Android Kill Process

    /********************************************************************** * Android Kill Process * 说明: ...