jQuery position()方法

jQuery position()方法允许您获取元素相对于父元素的当前位置。它返回第一个匹配元素的位置。该方法返回一个包含两个属性的对象：top和left，以像素为单位表示位置。

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

当您想要在相同的DOM元素中将新元素放置在另一个元素附近时，position()方法更加有用。

语法 :

$(selector).position()

jQuery position()方法示例

让我们通过一个示例来演示jQuery position()方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
        var x = $("p").position();
        alert("Top position: " + x.top + " Left position: " + x.left);
    });
});
</script>
</head>
<body>
<p>You are reading this tutorial on javatpoint.com</p>
<button>Click here to return the offset coordinates of the p element</button>
</body>
</html>

另一个使用jQuery position()的示例

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.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>Click on any square:</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>