根据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>
答案 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;
}
然后进行正常编码