jQuery库中position()函数概述及案例
2017-10-23 本文已影响22人
飞一般的八哥
jQuery库中操作页面元素的CSS样式有一个position()函数。position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。返回的对象包含两个整型属性：top 和 left。
所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。该函数返回一个坐标对象，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。
与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。此外，position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。
position()函数的返回值为Object类型，返回一个相对于离它最近的"被定位的"祖辈元素的偏移坐标对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>position()函数</title>
</head>
<body>
<script src="js/jquery-3.2.1.js"></script>
<p id="one" style="position:relative"><sapn id="two">Hello</sapn></p>
<script>
var x = $("#two").position();
alert("顶部位置: " + x.top +","+ "左部位置: " + x.left);
</script>
</body>
</html>
position函数.png
