jQuery position函数

position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。
所谓"被定位的元素",就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。

该函数返回一个坐标对象,该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位。

与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offset()返回的是相对于当前文档的坐标。此外,position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。

该函数属于jQuery对象(实例)。

语法


jQuery 1.2 新增该函数。
jQueryObject.position( )

返回值


position()函数的返回值为Object类型,返回一个相对于离它最近的"被定位的"祖辈元素的偏移坐标对象,该对象具有left和top属性。

如果当前jQuery对象匹配多个元素,返回坐标时,position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素,则返回undefined。

position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0),向右为正,向下为正。

示例&说明


以下面这段HTML代码为例:
<br>
<br>
<p id="n1"><span id="n2">专注于编程开发技术分享</span></p>
以下jQuery示例代码用于演示position()函数和offset()函数的用法:

var $n2 = $("#n2");

// 输出n2的偏移坐标

var pos = $n2.position();
document.writeln( "n2的position()偏移坐标:(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标:(8, 60)

var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标:(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标:(8, 60)

从上述jQuery的运行结果可知,position()并不是获取相对于其父元素的偏移位置。如果n2的祖辈元素全部为默认定位,则position()返回的偏移位置和offset()函数一致。

下面,我们将上述HTML代码中的n1加上相对定位(relative):
<br>
<br>
<p id="n1" style="position: relative;" ><span id="n2">专注于编程开发技术分享</span></p>

然后,我们重新执行上述jQuery代码,可以看到以下结果:
var $n2 = $("#n2");

// 输出n2的偏移坐标

var pos = $n2.position();
document.writeln( "n2的position()偏移坐标:(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标:(0, 0)

var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标:(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标:(8, 60)
此时,在n2的祖辈元素中,n1是离n2最近的定位的祖辈元素(这里是relative,absolute、fixed也是如此),因此position()返回n2相对于n1的偏移位置。

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND