HTML/Javascript-爲什麼我不能在表格中使用offsetTop for div？

Question

offsetTop屬性應返回對象的絕對位置。當我使用表中的對象時它很好用，但是如果對象在表內返回，那麼它總是返回1.爲什麼會發生以及如何避免它？

看到的問題示例： http://jsfiddle.net/6Y7qp/

<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<div id='a' >a 
<table style='border:solid thin black'> 
    <tr> 
    <td> 
    <div id='b'>b in table</div> 
    </td> 
    </tr> 
</table> 
<button onclick="document.getElementById('p').innerHTML='offsetTop:\na='+document.getElementById('a').offsetTop+'\nb='+document.getElementById('b').offsetTop">Show Off Set Top</button> 
</div> 
<pre id='p'> 
</pre> 

在此示例中，我需要得到 「A」 和 「B」 的offsetTop，但它總是在我的Firefox和Chrome瀏覽器返回1 「B」

Answer 1

因爲這就是它應該工作的方式。由於MDN規定：

offsetTop返回電流元件相對於所述距離 的offsetParent節點的頂部。

你說什麼offsetParent？高興你問：

offsetParent返回到其最接近的 （最近在包含層次結構）的對象的引用定位包含元素。 如果元素未定位，則最接近的表格單元格或根元素（標準兼容模式下的html;渲染 模式的怪癖主體）是offsetParent。解決此

一種方式是通過剛剛在設置表格單元格的格的位置：

td div { 
    position:relative; 
} 

jsFiddle example