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 ...
随机推荐
- Docker的安装及操作
1. 在Ubuntu中安装Docker 更新ubuntu的apt源索引 sudo apt-get update 安装包允许apt通过HTTPS使用仓库 sudo apt-get install \ a ...
- Qt QScrollArea and layout in code
Qt QScrollArea and layout in code 一.参考文档: . Qt 第六章 QScrollArea类给QWidget添加滚动条 http://blog.csdn.net/co ...
- Qt jsoncpp 对象拷贝、删除、函数调用 demo
/*************************************************************************************************** ...
- linux自学(一)之vmware虚拟机安装
之前有研究过linux,后来一段时间没有操作了,现在有点陌生,而且当初也没有记录学习内容.现在想从新开始包括虚拟机安装到部署Javaweb项目,把这之间所需要的全都记录下来,以便后边学习参考使用. 虚 ...
- Codeforces 834D The Bakery 【线段树优化DP】*
Codeforces 834D The Bakery LINK 题目大意是给你一个长度为n的序列分成k段,每一段的贡献是这一段中不同的数的个数,求最大贡献 是第一次做线段树维护DP值的题 感觉还可以, ...
- mfc 鼠标、键盘响应事件
一.基本目标 1.有一个基本的MFC程序,点击“关闭”则“关闭”这个程序,这点没什么好讲的,把自带的“取消”按钮,右键->属性的Caption改成“关闭”二字就可以了 2.鼠标在对话框中移动,则 ...
- Promise详解
前言 && 基础概念 Promise 是解决 JS 异步的一种方案,相比传统的回调函数,Promise 能解决多个回调严重嵌套的问题. Promise 对象代表一个异步操作,有三种状态 ...
- vw+vh+rem响应式布局
科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...
- 修改selinux出现setsebool: SELinux is disabled.的解决方法
1.vi /etc/vsftpd/vsftpd.conf # You may specify an explicit list of local users to chroot() to their ...
- python模块--os模块的用法
os.getcwd() 获取当前工作的目录,即当前python脚本工作的目录路径 os.phdir("dirname") 改变当前脚本的工作目录:相当于shell下cd os.cu ...