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版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
随机推荐
- 我劝!这位年轻人不讲MVCC,耗子尾汁!
目录 一.事物的隔离级别与MVCC? 二.Repeatable Read是如何实现的 本文是MySQL专题第15篇,全文近100篇(公众号首发) 三.Read Commited是如何实现的: 本文是M ...
- fist-第三天冲刺随笔
这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE1 这个作业要求在哪里 https://edu.cnblogs.com/campus/fz ...
- docker镜像无法删除 Error:No such image:xxxxxx
前言 docker镜像无法删除,通过 docker images 查看镜像明明存在就是删除不了. 删除提示:Error:No such image:xxxxxxx 具体截图内容如下: 解决方法 进入目 ...
- PyQt(Python+Qt)学习随笔:QTreeView树形视图的sortingEnabled属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTreeView树形视图的sortingEnabled属性用于控制视图中的数据是否启用按表头排序, ...
- 问题:PyCharm调试方法Force run to cursor与run to cursor的区别
Force run to cursor与run to cursor的差别是,后者在执行到光标的代码行前,如果有代码中设置了断点,会在该断点处暂停,等待进一步调试指令,而Force run to cur ...
- 敏捷开发(Scrum)与敏捷测试
1.敏捷测试流程和传统测试流程 软件测试是贯穿整个软件开发生命周期.对软件产品(包括阶段性产品)进行验证和确认的活动过程,也是对软件产品质量持续的评估过程,其目的是尽快尽早地发现在软件产品(包括阶段性 ...
- 本地代码上传到github
一,注册Github账号 1.先注册一个账号,注册地址:https://github.com/ 2.登录后,点击start a project 3.创建一个repository name,输入框随便取 ...
- 再也不怕 JavaScript 报错了,怎么看怎么处理都在这
在开发中,有时,我们花了几个小时写的 JS 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来.至此,本文主要记录 JS 常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理 ...
- 团队作业4-Day5
团队作业4-Day5 项目git地址 1. 站立式会议 2. 项目燃尽图 3. 适当的项目截图 4. 代码/文档签入记录(部分) 5. 每人每日总结 吴梓华:补充了样式代码以方便调试. 白军强:顺利完 ...
- NOI Online #1 入门组 魔法
全网都是矩阵快速幂,我只会倍增DP 其实这题与 AcWing 345. 牛站 还是比较像的,那题可以矩阵快速幂 / 倍增,这题也行. 先 \(Floyd\) 预处理两点之间不用魔法最短距离 \(d_{ ...