offset()与position()的区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下:
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
第二种用法:offset( coordinates )
让我们重新设置元素的位置这个元素的位置是相对于document对象的。
如果对象原先的position样式属性是static的话,会被改成relative来实现重定位。
$("#xx").offset({top:200,left:200});
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,
请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
offset()和position()的区别:
1 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
2 使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
3 使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
一般情况下,如果要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的;
如果显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body)。这个时候用offset()是最好的
offset()与position()的区别的更多相关文章
- jQuery获得元素位置offset()和position()的区别
jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...
- jquery offset()和position()的区别
<script src="jquery/jquery-3.3.1.min.js"></script> <script type="text/ ...
- js和jq中常见的各种位置距离之offset()和position()的区别(二)
offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...
- jquery的offset与position的区别
这里offset取得是屏幕影藏的y轴的距离➕元素距离屏幕的y轴的距离. 而postion取得的则是,上一个父元素(包含postion定位的)的距离
- .offset()与.position()区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...
- 区分jquery中的offset和position
一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...
- jquery offset() 与position()方法的区别
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- Jquery中的offset()和position()深入剖析
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- 关于jQuery中的 offset() 和 position() 的用法
---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
随机推荐
- 第12.1节 Python os模块导览
os 模块提供了许多与操作系统交互的函数,一定要使用 import os 而不是 from os import * ,这将避免内建的 open() 函数被 os.open() 隐式替换掉,它们的使用方 ...
- 稀疏矩阵三元组表快速转置(C语言实现)
本来准备昨天下午写的,但是因为去参加360众测靶场的考核耽搁了,靶场的题目还是挺基础的. 继续学习吧. 使用黑色墨水在白纸上签名就像由像素点构成的稀疏矩阵.如图4所示. 图4 手写体签名 [问题]请将 ...
- 【软件测试部署基础】maven的认识
最近部门分享测试环境部署相关内容,在同事的分享下,学到了很多新的知识点,也是我们在测试环境部署的时候非常重要的一些基本的知识点,当你系统的去了解了一下,你会发现后端在maven相关的点上有个清晰的了解 ...
- HuangB2ydjm
Hi! 我现在呢还是学生,想想初中的同学都结婚生子了,自己,嗯.(啊!!!) 本科以及硕士读的都是应用统计 在这里请广大网友多多指教了! 如果有机会的话,大家可以一起造轮子 you can catch ...
- 【APIO2019】路灯(ODT & (树套树 | CDQ分治))
Description 一条 \(n\) 条边,\(n+1\) 个点的链,边有黑有白.若结点 \(a\) 可以到达 \(b\),需要满足 \(a\to b\) 的路径上的边不能有黑的.现给出 \(0\ ...
- Springboot websocket学习Demo
使用的是springboot2.1.4版本 <parent> <groupId>org.springframework.boot</groupId> <art ...
- linux tar 压缩和解压缩
tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个. 下面 ...
- uniapp-vuex实现tabbar提示点
底部入口栏的红点提示是app中常见的功能,或者说是必要功能,通常用来提醒用户去查看或操作某个模块内容. 看项目性质如果需要比较多并且灵活的提示,则需要用到长连接技术. 1.红点提示是根据接口返回的数据 ...
- C++11新特性 变参模板、完美转发(简述)
变参模板 (Variadic Template) - 使得 emplace 可以接受任意参数,这样就可以适用于任意对象的构建 完美转发 - 使得接收下来的参数 能够原样的传递给对象的构造函数,这带来另 ...
- Linux下网卡配置多个IP
ip addr add 192.168.12.4/24 dev eno16777728但是每次重启会失效 如果希望每次重启会重新绑定IP,可以将:ip addr add 192.168.12.X/24 ...