16

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

3 回答 3

10

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

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

.inner {
  position:relative;
  top:50px;
  ...
}
于 2012-07-18T13:45:29.663 回答
5

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

然后进行正常的编码

于 2012-07-18T12:31:56.253 回答
5

这对你有帮助吗？：

document.getElementById("innerDiv").offsetTop;

或者使用jquery的偏移方法：

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

于 2012-07-18T12:34:04.513 回答