网上百度都有的说明是

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. 20165202 2017-2018-2《Java程序设计》课程总结

    每周作业链接汇总 ++预备作业一:我期待的师生关系++ ++预备作业二:学习基础和C语言基础调查++ ++预备作业三:linux安装及学习++ ++第一周作业:初识JAVA,注册码云并配置Git++ ...

  2. Xss测试

    <Script>alert(“XSS attack available!”);</Script>

  3. vue_ form表单 v-model

    插值两种方式:{{}},v-model v-model 可以用 v-model 指令在只能在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件 ...

  4. mongo 指令

    简单查询1: db.find( {}, {} )  第一个{} 是条件,第二个{}是需要那些属性, db.find( {} )      第二个{}没有,代表返回所有属性 db.find( {age: ...

  5. 51nod 1244 莫比乌斯函数之和 【杜教筛】

    51nod 1244 莫比乌斯函数之和 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使用μ(n)(miu(n))作为莫比乌斯函数的记号.具体定义如下: 如果一个数包含 ...

  6. c# 图片转流 流转文件

    //----引入必要的命名空间 using System.IO; using System.Drawing.Imaging; //----代码部分----// private byte[] photo ...

  7. Working out

    Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to look hot at the ...

  8. 实用符号Alt+小键盘快输

    键盘输入:①Word.写字板.QQ2011等,Alt+Unicode之十进制数:②记事簿.网页框.浏览器之地址栏.TM2009等,Alt+GBK之十进制数. 字符 Unicode 十进制数 GBK ...

  9. ubuntu ftp服务器搭建

    linux ftp服务器部署 1.sudo apt-get install vsftpd   ##下载vsftpd 2.sudo vim /etc/vsftpd.conf  ##vsftpd配置文件 ...

  10. python 中的异常处理

    refer to: http://www.runoob.com/python/python-exceptions.html http://www.pythondoc.com/pythontutoria ...