jQuery的position()方法

来源：互联网发布：html在线视频聊天源码编辑：程序博客网时间：2024/05/16 06:53

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

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

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

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

语法结构:

$(selector).position()

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

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

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

实例代码:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>position()函数-蚂蚁部落</title><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>

0 0