网上百度都有的说明是

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. log4cpp第一个程序HelloWord

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  2. 【Html 学习笔记】第五节——表格

    表格也是日常用到的. 普通表格:<table> 表格边框:border 表头:th 表格标题:caption 横/纵向合并的单元格:colspan .rawspan 表格内标签: 单元格间 ...

  3. LeetCode OJ:Number of 1 Bits(比特1的位数)

    Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...

  4. python简单日志统计

    业务场景:在一个目录里,有许多日志文件,里面是一条条的json数据,格式如下,为防止一个账号被多个ip使用,现在我想知道:哪些用户登录了哪些ip,和哪些ip登录了哪些用户,如果一个ip对应一个用户,就 ...

  5. Tencent tinker 出现pre-verified crash

    异常类型:app运行时异常 手机型号:sumsung N9008 手机系统版本:android4.4.2 tinker版本: 1.8.1 gradle版本::2.3.3 是否使用热更新SDK: Tin ...

  6. 《Effective C++》第5章 实现-读书笔记

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

  7. Django中间件(勾子函数)使用

    中间件 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django ...

  8. WEB-INF目录下的文件访问权限

    对于Tomcat服务器而言,WEB-INF是个特殊的目录.这个目录并不属于Web应用程序可以访问的上下文路径的一部分, 对于客户端来说,这个目录是不可见的,不能通过在浏览器中直接输入地址的方式来访问. ...

  9. HashSet实现原理及源码分析

    HashSet简介 HashSet是Set接口实现,它按照Hash算法来存储集合中的元素 不保证元素顺序 HashSet是非同步的,如果多个线程同时访问一个HashSet,要通过代码来保证其同步 集合 ...

  10. printf格式输出数字,位数不够前面补0,适用与输出编号

    printf格式输出数字,位数不够前面补0,适用与输出编号 printf格式输出:%[flags][width][.perc][F|N|h|l]type 用到了flags中的 0 (注意是零不是欧) ...