jQuery position()和offset()的区别用法及代码示例

jQueryUI 方法都返回包含顶部和左侧位置的整数坐标属性的对象。顶部和左侧坐标的位置以像素为单位返回。这两个函数仅适用于可见元素，不适用于隐藏元素。

例子：该示例给出了包含文本的框的顶部和左侧坐标。


<!DOCTYPE html>
<html>
<head>
    <title>The difference between 
      offset and position Method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!-- jQuery code to show the method -->
    <script>
        /* code for position */
        $(document).ready(function() {
            $("#position").click(function() {
                var Geek = $("#testDiv").position();
                alert("Top : " + Geek.top +
                    " Left : " + Geek.left);
            });
            /* code for offset */
            $("#offset").click(function() {
                var Geek = $("#testDiv").offset();
                alert("Top : " + Geek.top +
                    " Left : " + Geek.left);
            });
        });
    </script>
    <style>
        #container {
            width: 40%;
            min-height: 100px;
            padding: 20px;
            font-size: 25px;
            border: 2px solid green;
            font-weight: bold;
            color: green;
            background: gray;
            position: relative;
        }
        #testDiv {
            background: silver;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>offset() and position()</b>
        <div>
            <div id="container">
                <div id="testDiv">
                  Welcome to GeeksforGeeks
                </div> 
            </div>
            <div style="height:10px"></div>
            <button id="offset">click for offset</button> 
            <button id ="position">
                  click for position
            </button> 
        </div>
    </center>
</body> 
</html>

输出：

在单击任何按钮之前：
单击按钮后：

抵消：

位置：

offset()和position()方法的区别：

offset()方法	position()方法
jQuery 中的 offset() 方法返回 HTML 元素相对于文档的第一个找到的位置。	jQuery 中的 position() 方法返回 HTML 元素相对于其父元素的偏移量的当前位置。
jQuery UI offset() 是相对于文档的。	jQuery UI position() 是相对于父元素的。
当您想要将一个新元素放置在另一个已经存在的元素之上时，最好使用 jQuery offset() 方法。	当您想要将新元素放置在同一容器内的另一个 DOM 元素附近时，最好使用 jQuery position() 方法。
offset()方法主要用在drag-and-drop函数中。	position() 方法用于相对于文档、窗口或其他元素(如鼠标或光标)定位元素。

相关用法

注：本文由纯净天空筛选整理自geetanjali16大神的英文原创作品 What is the difference between position() and offset() in jQuery ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。