Question

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

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

以下代码预计会返回值51，但它返回值0.任何人都可以提供洞察力，为什么呢？提前谢谢。

我知道添加css（top：xx）是有效的，如果是的话，这是否意味着position（）仅适用于元素具有top的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>

Answer 1

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

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

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

Answer 2

这对你有帮助吗？：

document.getElementById("innerDiv").offsetTop;

或使用jquery Offset方法：

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

Answer 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;
        }

然后进行正常编码

jQuery position（）。top返回0而不是实际值

3 个答案: