position() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:position

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. position

Description

The position() method returns the position relative to its parent element of the first matched element.

This method returns an object with 2 properties; the top and left positions in pixels.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        x = $("p").position();
        $("#span1").text(x.top);
        $("#span2").text(x.left);
    });/*from  ww w. ja va  2 s.  c  o m*/
});
</script>
</head>
<body>

<div style="border:1px solid black;padding:100px;margin:50px;">
  <p>Position of this paragraph (relative to its parent element) is <span id="span1">x</span> top and <span id="span2">x</span> left.</p>
  <button>Get position</button>
</div>

</body>
</html>

Related Tutorials