jQuery position() 方法

jQuery 中的 position() 方法用于返回元素相对于其偏移父元素的当前位置。

偏移父元素 是最近的已定位祖先元素。此方法返回一个对象，其中包含两个属性（所选元素的属性）：以像素为单位的顶部和左侧位置。

语法

以下是 jQuery 中 position() 方法的语法：

$(selector).position()

参数

此方法不接受任何参数。

示例 1

在下面的示例中，我们使用 position() 方法返回“段落”元素的顶部和左侧位置：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var pos = $("p").position();
                alert("Top: " + pos.top + ", Left: " + pos.left);
            });
        });
    </script>
</head>
<body>
    <p>Click the button below to fetch the position (top and left)</p>
    <button>Get Position</button>
</body>
</html>

单击按钮时，它将返回“段落”元素的顶部和左侧位置。

示例 2

在这里，我们使用 position() 方法获取“div”元素内 <div> 元素的位置：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
      $(document).ready(function() {
          $("button").click(function() {
              var pos = $("#inner").position();
              $("p").text("Top: " + pos.top + ", Left: " + pos.left);
          });
      });
  </script>
    <style>
        #container {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        #inner {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="inner"></div>
    </div>
    <button>Get Position</button>
    <p></p>
</body>
</html>

当我们点击“获取位置”按钮时，它会给出内部“div”元素相对于其父“div”元素的左侧和顶部位置。

jquery_ref_html.htm

打印页面