$element.css('top') 返回不同的值给 $element.position().top

Question

我正在尝试提取元素的位置，我已经意识到left的CSS属性，top向$element.position().left或$element.position().top返回不同的值。

我尝试跟踪的<div>定位是绝对的：

.container {
position: relative;
height: 100%;
width: 100%;
padding: 0px;
}
.target {
position: absolute;
left: 0%;
top: 12%
}

<div class="container">
<div class="target">
</div>
</div>

所以$('.target').css('top')'12%'返回，$('.target').position().top返回0.

这种差异是预期的还是我缺少什么？我的项目中的元素显然没有定位在 0， 0！

而且，更重要的是，为什么 position((.top 和 position((.left 属性都返回 0，而给定元素在屏幕上的最终渲染位置，其中一个属性应该是非零的？

Answer 1

如果设置了css指令，则top返回css('top')指令。

而position().top返回计算出的top位置。

我你有一个top position要0，这是因为你的container没有定义一个height，这是bootstrap的"正常"行为。

即使，你有一个position: absolute，在你的target.

要有一个top position12%你container的高度，你必须固定container的高度，就像这样：

$(document).ready(function() {
console.log($(".target").position().top);
});

.container {
position: relative;
height: 500px;
}
.target {
position: absolute;
left: 0%;
top: 12%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="target">
aaa
</div>
</div>

要使top position12%文档，您必须在target上使用position: fixed，如下所示：

$(document).ready(function() {
console.log($(".target").position().top);
});

.container {
position: relative;
}
.target {
position: fixed;
left: 0%;
top: 12%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="target">
aaa
</div>
</div>

Answer 2

就像ADreNaLiNe-DJ刚刚说css('top')返回css指令top，在您的情况下为12%，而position().top返回计算出的top位置。

您必须定义父容器的height或padding，才能使用position().top查看不同于 0 的值