Javascript jQuery position().top 返回 0 而不是实际值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11541362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery position().top returns 0 rather than real value
提问by Ley
According to the jQuery official documentation, this function should:
根据 jQuery 官方文档，这个函数应该：
"Get the current coordinates of the first element in the set of matched elements, relative to the offset parent."
“获取匹配元素集中第一个元素的当前坐标，相对于偏移父元素。”
The following code is expected to return value 51, but it returns value 0. Could anyone provide insight as too why? Thanks in advance.
下面的代码预计返回值 51，但它返回值 0。任何人都可以提供洞察力吗？提前致谢。
I know that adding css(top:xx) works, if so, does that mean position() only work for the case the element has the css property of top?
我知道添加 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>
采纳答案by andyb
The API description is correct. The inner element has the (initial) default CSS property value of top:auto. There is a margin-top:50pxwhich as you know is giving the impression that the inner element is 50pxfrom the top, but this is not the case. jQuery will return position().top = 0since the element's top really is 0pxfrom the parent element.
API 描述是正确的。内部元素的（初始）默认 CSS 属性值为top:auto。margin-top:50px如您所知，有一个给人的印象是内部元素50px来自顶部，但事实并非如此。jQuery 将返回，position().top = 0因为元素的顶部确实0px来自父元素。
For jQuery to return an expected value using the .position()function you would need to position the inner <div>relatively (or absolute depending on your needs) to the parent and supply a top value and remove the margin-topproperty, for example:
为了让 jQuery 使用该.position()函数返回预期值，您需要将内部<div>相对（或绝对取决于您的需要）定位到父级并提供一个最高值并删除该margin-top属性，例如：
.inner {
position:relative;
top:50px;
...
}
回答by bugwheels94
It is alerting 0 which is 100% correct , because top only returns values other that 0 when you are using them to position an element but here you are using margins and padding to position element so use them to get the top distance.Like
它警告 0 是 100% 正确的，因为当您使用它们来定位元素时，顶部仅返回 0 以外的值，但在这里您使用边距和填充来定位元素，因此使用它们来获得顶部距离。喜欢
$(document).ready(function () {
$('.inner').mousedown(function (e) {
alert($(this).css("margin-top"));
})
})
If you want to use position then do it
如果你想使用位置然后做
.inner
{ position:absolute;
width:50px;
height:50px;
top: 50px;
border:1px solid red;
}
and then do your normal coding
然后做你的正常编码
回答by ThdK
Is this helping you?:
这对你有帮助吗？：
document.getElementById("innerDiv").offsetTop;
document.getElementById("innerDiv").offsetTop;
Or use the jquery OffsetMethod:
或者使用 jquery Offset方法：
The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.
.offset() 方法允许我们检索元素相对于文档的当前位置。将此与 .position() 进行对比，后者检索相对于偏移父级的当前位置。当将新元素放置在现有元素之上以进行全局操作（特别是实现拖放）时，.offset() 更有用。
