我在HTML文檔中有一個元素id="stimulus"。瞭解偏移方法的返回值
當我在瀏覽器中打開此文檔，並使用瀏覽器的控制檯進行調查#stimulus性能，這是我所看到的：
> $('#stimulus').offset()
< Object {top: 0, left: 0}
> $('#stimulus').css('top')
< "-155.761px"
> $('#stimulus').css('left')
< "253.087px"
我該怎樣解讀？ topoffset與使用css方法訪問的top不同？
從offset() documentation開始，偏移量來自文檔的頂部;而頂部和左側的CSS屬性是相對於父項。也許你想看看position(）來獲得相對於offset parent的偏移量。
jQuery的.offset()方法「返回元素相對於文檔的座標」，而.css()方法返回任何通過CSS樣式應用的值。
偏移量是整個頁面中的位置
CSS頂部將現在的位置元件相對於它的位置最靠近的祖先。 這祖先可能是在頁面的任何地方，因此偏移和頂部不匹配，除非沒有定位的祖先
從jQuery's .offset() documentation：
的
.offset()方法允許我們檢索元素的當前位置相對於文件。將其與.position()進行對比，其檢索相對於抵消父母的當前位置。
的.css()方法抽象天然CSSStyleDeclaration API，它返回相對於父元素，的位置，但只有當它是在CSS明確指定。所以，如果你想要的話，然後用.position()而不是.offset()。
$(function() {
var child = $('.child');
console.log('offset: ', child.offset());
console.log('position: ', child.position());
console.log('css: ', {
top: child.css('top'),
left: child.css('left')
});
});html,
body {
margin: 0;
padding: 0;
}
.parent {
position: absolute;
top: 5px;
left: 5px;
}
.child {
position: absolute;
top: 10px;
left: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<div class="parent">
<div class="child">Hello World</div>
</div>你可能得到的結果是不同，因爲id="stimulus"正在動畫，你在不同的幀sended console.log。或者這個元素實際上是「靜態的」，並且有一些其他屬性會改變他的位置。
就像在我的例子
console.log("Offset:", $('.test').offset()); // returns {top: 0, left: 0}
console.log("Top/Left:", $('.test').css('top'), $('.test').css('left')); // returns -200px, -20px.test{
position: absolute;
top: -200px;
left: -20px;
transform: translateY(200px) translateX(20px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
，那不是意味着'＃stimulus'應該出現在（0,0）整個文檔的位置？那不是網頁的左上角？ （這不是'＃刺激'出現的地方。） – dbliss
@dbliss您的元素是否隱藏，用填充，邊框或邊距進行偏移？該文件表示，它不提供特殊情況下的正確位置 –
@dbliss爲什麼不提供複製問題的簡約樣本？當我訪問刺激被隱藏的值時，它應該是顯而易見的 –