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版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
随机推荐
- spring boot 访问外部http请求
以前 访问外部请求都要经过 要用 httpClient 需要专门写一个方法 来发送http请求 这个这里就不说了 网上一搜全都是现成的方法 springboot 实现外部http请求 是通过F ...
- SpringBoot系列:六、集成Swagger文档
本篇开始介绍Api文档Swagger的集成 一.引入maven依赖 <dependency> <groupId>io.springfox</groupId> < ...
- 「懒惰的美德」我用 python 写了个自动生成给文档生成索引的脚本
我用 python 写了一个自动生成索引的脚本 简介:为了刷算法题,建了一个 GitHub仓库:PiperLiu / ACMOI_Journey,记录自己的刷题轨迹,并总结一下方法.心得.想到一个需求 ...
- Python中sorted(iterable, /, *, key=None, reverse=False)的参数中的斜杆是什么意思?
通过help(sorted)查看sorted的帮助文档,显示如下: Help on built-in function sorted in module builtins: sorted(iterab ...
- Python中倒转输入序列元素顺序的reversed函数
reversed函数将输入的序列的元素倒转后存储到一个类型为"reversed"可迭代对象,不能直接访问,可以转换为其他对象如列表或通过for循环方法访问. 注意:这里是倒转不是倒 ...
- Zookeeper的基本原理(zk架构、zk存储结构、watch机制、独立安装zk、集群间同步复制)
1.Hbase集群的高可用性与伸缩性 HBase可以实现对Regionserver的监控,当个别Regionserver不可访问时,将其负责的分区分给其他Regionsever,其转移过程较快,因为只 ...
- 索引优化之Explain 及慢查询日志
索引:本质是数据结构,简单理解为:排好序的快速查找数据结构,以索引文件的形式存储在磁盘中.目的:提高数据查询的效率,优化查询性能,就像书的目录一样.优势:提高检索效率,降低IO成本:排好序的表,降低C ...
- 代码审计【根据功能点定向审计】BugFree ZSWin重装案例
(哦对了!这些CMS代码不要安装在服务器上,先不说它们用来代码审计本身就是有漏洞的,而且在网上下载下来,也不能保证没有源码是否被篡改而留有后门,就安装在本地进行代码审计的练习即可) 我们先下载BugF ...
- PR全套插件一键安装
PR全套插件一键安装,无需注册码软件也是我在别的地方搬来的,自己用着很好,决定分享出来! 我的PR版本是2019,用着没有任何问题.我没有安装其他版本PR,所以无法测试,不过应该是可以用的. 使用截图 ...
- 将Java项目打包成exe文件
第一步:参照我之前的博客:利用IDEA把项目打包成jar包第二步:下载安装exe4j软件第三步:新建文件夹,把jre,exe文件的图标,本项目的jar包以及项目用到的jar包都放到同一目录下[很重要] ...