jQuery position(）.top返回0，而不是实际值

jQuery position().top returns 0 rather than real value

本文关键字：position top 返回 jQuery      更新时间：2023-11-01

根据jQuery官方文档，该函数应该：

"获取匹配元素集中第一个元素相对于偏移父元素的当前坐标。"

以下代码预计返回值51，但返回值为0。有人能解释为什么吗？提前谢谢。

我知道添加css（top:xx）是有效的，如果是的话，这是否意味着position（）只适用于元素的css属性为top的情况？

<html>
<head>
    <style type="text/css">
        .outer
        {
            width:200px;
            height:200px;
            overflow-y:auto;
            border:1px dotted grey;
            position:absolute;
        }
        .inner
        {
            width:50px;
            height:50px;
            margin-top:  50px;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript"">
        $(document).ready(function () {
            $('.inner').mousedown(function (e) {
                alert($(this).position().top);
            })
        })
    </script>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

API描述正确。内部元素的（初始）默认CSS属性值为top:auto。有一个margin-top:50px，正如你所知，它给人的印象是内部元素是从顶部看的50px，但事实并非如此。jQuery将返回position().top = 0，因为元素的顶部实际上是来自父元素的0px。

为了让jQuery使用.position()函数返回期望值，您需要将内部<div>相对于父级（或绝对值，具体取决于您的需求）定位，并提供一个最大值并删除margin-top属性，例如：

.inner {
  position:relative;
  top:50px;
  ...
}

这对你有帮助吗？：

document.getElementById("innerDiv").offsetTop;

或者使用jquery偏移方法：

offset（）方法允许我们检索元素。与.position（）相比，其检索相对于偏移父对象的当前位置。在全局的现有元素之上定位新元素时操纵（特别是用于实现拖放），.offset（）更有用。

它警告0，这是100%正确的，因为当您使用top来定位元素时，top只返回0以外的值，但这里您使用边距和填充来定位元素，所以使用它们来获得顶部距离。像

$(document).ready(function () {
            $('.inner').mousedown(function (e) {
                alert($(this).css("margin-top"));
            })
        })

如果你想使用位置，那就

.inner
        {   position:absolute;
            width:50px;
            height:50px;
            top:  50px;
            border:1px solid red;
        }

然后进行正常的编码

相关文章：