jQuery position().top 返回 0 而不是实际值答案

【问题标题】：jQuery position().top returns 0 rather than real valuejQuery position().top 返回 0 而不是实际值
【发布时间】：2012-07-18 12:28:35
【问题描述】：

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

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

以下代码预计返回值 51，但它返回值 0。任何人都可以提供见解，为什么？提前致谢。

我知道添加 css(top:xx) 有效，如果是这样，是否意味着 position() 仅适用于元素具有顶部 css 属性的情况？

<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>

【问题讨论】：

使用 offset().top jsfiddle.net/XpynZ
@sofl 这个是相对于文档的，我想得到inner div和outer div之间的长度，也就是说我需要使用位置而不是偏移量。

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这对你有帮助吗？：

document.getElementById("innerDiv").offsetTop;

或者使用jqueryOffset方法：

.offset() 方法允许我们检索当前位置相对于文档的元素。将此与 .position() 进行对比，它检索相对于偏移父级的当前位置。将新元素放置在现有元素之上以进行全局时操作（特别是，用于实现拖放）， .offset() 更有用。

【讨论】：

好的，对不起，我的猜测很快，我现在在 Firefox 中模拟你的问题，它确实是 0 而不是一个值。我正在寻找它可能是什么。
Ankit 是对的，看看这个使用相对定位而不是边距的工作示例：jsfiddle.net/HPSLm
我知道添加 css(top:xx) 有效，如果是这样，是否意味着 position() 仅适用于元素具有顶部 css 属性的情况？

【解决方案3】：

它警告 0 是 100% 正确的，因为当你使用它们来定位元素时，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;
        }

然后进行正常的编码

【讨论】：

谢谢。我知道这种方式是可行的，但这不是我想要的。我只想使用 position()。
我知道添加 css(top:xx) 有效，如果是这样，是否意味着 position() 仅适用于元素具有顶部 css 属性的情况？
原谅？我不明白你的意思