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 ...
随机推荐
- defer async 区别
链接 <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是 ...
- node 项目材料 集合
resfull 与 token node生成 跨平台 验证码图片 搭建简单的服务器
- 一个浮动 css3效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- select2切换事件如何生效
1.问题背景 利用select2生成可搜索下拉框,并且绑定切换事件:但是直接绑定change事件,发现不起作用 2.问题原因 <!DOCTYPE html> <html> &l ...
- HDU 3345
http://acm.hdu.edu.cn/showproblem.php?pid=3345 最近重写usaco压力好大,每天写的都想吐.. 水一道bfs 注意的是开始旁边有敌人可以随便走,但是一旦开 ...
- Java内存模型的深入理解
基础 并发编程的模型分类 在并发编程需要处理的两个关键问题是:线程之间如何通信 和 线程之间如何同步. 通信 通信 是指线程之间以何种机制来交换信息.在命令式编程中,线程之间的通信机制有两种:共享内存 ...
- Android使用HTTP协议访问网络——HttpClient
套路篇 1.HttpClient是一个接口,因此无法创建它的实例,通常情况下都会创建一个DefaultHttpClient的实例 HttpClient httpClient=new DefaultHt ...
- JavaScript class 使用
/********************************************************************* * JavaScript class 使用 * 说明: * ...
- 【测试技术】websocket-client
Websocket Client 继续上周的议题.因为我不会写go,不会写websocket客户端,导致整个测试过程我是个完美的酱油党.上周我终于把客户端服务写好了. 选择Websokcet框架 现在 ...
- MySQL 5.6.30 升级到5.7.10
MySQL 5.6.30 升级到5.7.10 注意,这种方式的前提是数据文件没有和软件目录在一起,如果在一起,需要停止数据库后先移动数据文件 1.解压5.7.10包到/usr/local2.停止当前的 ...