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版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
随机推荐
- 探究 | 如何捕获一个Activity页面上所有的点击行为
前言 最近逛wanAndroid论坛,发现一个有趣的问题:如何捕获一个Activity页面上所有的点击行为. 一起研究下吧,不想看源码的小伙伴可以直接看文末总结- 准备工作 先得罗列出页面上的一些点击 ...
- PyQt(Python+Qt)学习随笔:QTableView的showGrid属性
老猿Python博文目录 老猿Python博客地址 showGrid属性用于控制视图中数据项之间是否显示网格,如果该属性为True,则绘制网格:如果该属性为False,则不绘制网格. showGrid ...
- PyQt(Python+Qt)学习随笔:Qt Designer中Action创建的方法
在Qt Designer中,可以两种方法创建Action对象,一种是菜单定义时,一种是单独定义. 一.定义菜单创建Action 在Qt Designer中创建菜单时,如果对应菜单是最终执行的菜单项,则 ...
- PyQt(Python+Qt)学习随笔:Qt Designer中QAbstractButton派生按钮部件的icon属性和iconSize属性
icon属性 icon属性保存按钮上展示的图标,图标的缺省大小由图形界面的样式决定,但可以通过 iconSize 属性进行调整. 图标的几种子属性状态的含义与QWidget的windowIcon属性相 ...
- Fiddle重定向请求
以当当网和淘宝网为例: 1.打开浏览器,在地址栏中输入www.dangdang.com,进入当当主页. 2.在规则编辑器中设置规则,将dangdang重定向至taobao,并打开规则. 3.再次刷新当 ...
- tcp socket学习
更新一波学的socket编程,socket还是比较重要的,探测端口,连接服务底层都是socket编程.tcp有server 和 client.client和udp发送差不多. server端是建立了两 ...
- Android10_原理机制系列_PMS的启动及应用的安装过程
概述 这里主要介绍 PackageManagerService(简称PMS)的启动 和 一个应用的安装过程.这里只是大致总结,供参考,不少地方同样需要进一步深入了解学习的. 该篇相关代码也是基于And ...
- LeetCode初级算法之数组:26 删除排序数组中的重复项
删除排序数组中的重复项 题目地址:https://leetcode-cn.com/problems/remove-duplicates-from-sorted-array/ 给定一个排序数组,你需要在 ...
- javascript中 fn() 和 return fn() 的区别
在js中用return和不用return,输出结果有的时候傻傻搞不清,之前在网上看到个例子挺经典,不过讲的不清楚,上例子: var i = 0; function fn(){ i++; if ...
- LibreOj-10012-「一本通-1-2-例-2」Best-Cow-Fences
题目地址 思路 二分平均值,区间为$0$~$2000$.将每个$a[i]$减去平均值,就只用考虑字段和是否$>=0$了. 关于计算子段和,可以使用前缀和表示,$sum[i]$表示前$i$个数的和 ...