offset()和position()
网上百度都有的说明是
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()的更多相关文章
- jquery offset() 与position()方法的区别
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- 区分jquery中的offset和position
一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...
- .offset()与.position()区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...
- jQuery获得元素位置offset()和position()的区别
jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...
- 关于jQuery中的 offset() 和 position() 的用法
---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
- 关于jQuery中的offset()和position()
在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该 ...
- Jquery中的offset()和position()深入剖析(元素定位)
先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...
- Jquery中的offset()和position()深入剖析
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- offset()与position()的区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
随机推荐
- log4cpp第一个程序HelloWord
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- 【Html 学习笔记】第五节——表格
表格也是日常用到的. 普通表格:<table> 表格边框:border 表头:th 表格标题:caption 横/纵向合并的单元格:colspan .rawspan 表格内标签: 单元格间 ...
- 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 ...
- python简单日志统计
业务场景:在一个目录里,有许多日志文件,里面是一条条的json数据,格式如下,为防止一个账号被多个ip使用,现在我想知道:哪些用户登录了哪些ip,和哪些ip登录了哪些用户,如果一个ip对应一个用户,就 ...
- Tencent tinker 出现pre-verified crash
异常类型:app运行时异常 手机型号:sumsung N9008 手机系统版本:android4.4.2 tinker版本: 1.8.1 gradle版本::2.3.3 是否使用热更新SDK: Tin ...
- 《Effective C++》第5章 实现-读书笔记
章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...
- Django中间件(勾子函数)使用
中间件 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出.中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Django ...
- WEB-INF目录下的文件访问权限
对于Tomcat服务器而言,WEB-INF是个特殊的目录.这个目录并不属于Web应用程序可以访问的上下文路径的一部分, 对于客户端来说,这个目录是不可见的,不能通过在浏览器中直接输入地址的方式来访问. ...
- HashSet实现原理及源码分析
HashSet简介 HashSet是Set接口实现,它按照Hash算法来存储集合中的元素 不保证元素顺序 HashSet是非同步的,如果多个线程同时访问一个HashSet,要通过代码来保证其同步 集合 ...
- printf格式输出数字,位数不够前面补0,适用与输出编号
printf格式输出数字,位数不够前面补0,适用与输出编号 printf格式输出:%[flags][width][.perc][F|N|h|l]type 用到了flags中的 0 (注意是零不是欧) ...