jQuery position()。top返回0而不是实际值

时间:2012-07-18 12:28:35

标签: javascript jquery

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

3 个答案:

答案 0 :(得分:10)

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

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

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

答案 1 :(得分:5)

这对你有帮助吗?:

document.getElementById("innerDiv").offsetTop;

或使用jquery Offset方法:

  

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

答案 2 :(得分:4)

警告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;
        }

然后进行正常编码