jQuery的position()方法详解

2024-05-06 16:23:29

字体：大中小

来源：转载

供稿：网友

position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。

position()方法的定义和用法:

此方法获取匹配元素相对某些元素的偏移量。

返回的对象包含两个整型属性(top和left)的对象。

此方法只对可见元素有效。

语法结构:

$(selector).position()

在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量。很多教程都说方法返回的偏移量是相对于父元素，其实并非完全如此，此方法会将匹配元素以绝对定位方式处理，当然并不是说真的将匹配元素设置为绝对定位。方法的偏移量参考原则如下:

1.如果父辈元素中没有采用定位的(position属性值为relative、absolute或者fixed)，那么偏移量参考对象为窗口。

2.如果父辈元素中有采用定位的，那么偏移量的参考对象为距离它最近的采用定位的元素，

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<style type="text/css">

*{

margin:0px;

padding:0px;

}

.father{

background-color:green;

width:200px;

height:200px;

padding:50px;

margin-bottom:50px;

margin-left:100px;

}

.children{

height:150px;

width:150px;

background-color:red;

line-height:150px;

text-align:center;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".children").each(function(){

var text;

text="left:"+$(this).position().left;

text+="top:"+$(this).position().top;

$(this).text(text);

})

})

</script>

</head>

<body>

<div class="father" style="position:relative">

<div class="children"></div>

</div>

<div class="father">

<div class="children"></div>

</div>

</body>

</html>