jQuery position() 方法使您能够检索元素相对于父元素的当前位置。它返回第一个匹配元素的位置。此方法返回具有两个属性的对象:顶部和左侧位置（以像素为单位）。

注意：

jQuery position() 方法与 jQuery offset() 方法不同，因为 position() 方法检索元素相对于父元素的当前位置，而 offset() 方法检索当前相对于文档的位置。

语法

$(selector).position()

示例

例1

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var x = $("p").position();
        alert("top 位置: " + x.top + " left 位置: " + x.left);
    });
});
</script>
</head>
<body>
<p>yxjc123.com</p> jQuery position() 方法例子<br>
<button>点击这里返回p元素的偏移坐标</button>
</body>
</html>

例2

<!DOCTYPE html>
<html>
<head>
<title>jQuery position() 方法例子</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
	$("div").click(function () {
	var position = $(this).position();
		$("#lresult").html("left position: <span>" + position.left + "</span>.");
		$("#tresult").html("top position: <span>" + position.top + "</span>.");
	});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>点击任意方块:</p>
<span id="lresult"> </span>
<span id="tresult"> </span>
<div style="background-color:#ffd700"></div>
<div style="background-color:#030303"></div>
<div style="background-color:#473c8b"></div>
<div style="background-color:#ee82ee"></div>
</body>

</html>