.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()是最好的。

【出处】http://yoyoyuan.blog.51cto.com/3313685/645190

时间: 2024-10-09 18:54:50

.offset()与.position()区别的相关文章

Jquery中的offset()和position()深入剖析

jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢? 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和

0186 元素偏移量 offset 系列:offsetTop,offsetLeft,offsetWidth,offsetHeight,offset 与 style 区别,

1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

Jquery中的offset()和position()深入剖析(元素定位)

先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和填充属性上使用像素单位.此方法只对可见元素有效. 真的就这么简单吗?实践出真知. 先来看看在jquery框架源码里面,是怎么获得position()的: 1 // Get *real* offsetPar

jQuery的offset()和position()用法详解

offset()和position()用法详解: 这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这两个方法的用法. 下面先看一下它们基本的定义: 1.offset()方法的定义: 此方法获取或者设置匹配元素在当前document的相对偏移. 此方法只对可见元素有效. 当获取偏移量时,方法的返回值是一个包含两个整型属性(top和left)的对象. 设置偏移量时,此方法的参数是带有top和left属性的对象. 具体用法可以参阅jQuery的offset()方法一章节. 2.positio

关于jQuery中的offset()和position()

在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢? 先看看API对这这两个方法的定义:offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.position():获取匹配元素相对父元素的偏移.返回

jquery中使用css,offset和position设置top和left属性

有一个dom元素,它的position属性值为absolute,要通过jquery设置它的位置. 我们可以通过三种方法设置该元素的top和left值,设置这两个属性的值时,元素的position属性必须为absolute或relative. 第一种:使用jQuery对象的css方法,使用该方法可以直接把对象的位置设定到指定的地方,指定哪个位置就是哪个位置. 第二种:使用jQuery对象的offset方法,使用该方法时要注意,offset方法的作用是获取或设置匹配元素在当前视口的相对偏移.这句话粗

关于jQuery中的 offset() 和 position() 的用法

---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢? 先看看API对这这两个方法的定义: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position():

JQ之 offset 和 position 的用法与区别

offset:获取元素相对于文档(document)的当前坐标 注意 使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移. postion : 获取元素相对父元素的偏移 注意: 1,使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置. 2,使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前

jquery的offset与position的区别

这里offset取得是屏幕影藏的y轴的距离?元素距离屏幕的y轴的距离. 而postion取得的则是,上一个父元素(包含postion定位的)的距离