Question

offsetTop属性应返回对象的绝对位置。当我使用表中的对象时，它工作得很好，但如果对象在表中，它总是返回1.为什么会发生这种情况以及如何避免它？

<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浏览器中它总是为“b”返回1

Answer 1

因为这是应该的方式。正如MDN所说：

offsetTop返回当前元素相对于的距离 offsetParent节点的顶部。

你说的offsetParent是什么？很高兴你问：

offsetParent返回对最近的对象的引用（包含层次结构中最近的）包含元素的位置。 如果元素未定位，则最近的表格单元格或根元素（标准兼容模式中的html;怪异渲染中的主体） mode）是offsetParent。

解决此问题的一种方法是通过以下方式在表格单元格中设置div的位置：

td div {
    position:relative;
}

<强> jsFiddle example

HTML / Javascript-为什么我不能在表格内使用offsetTop？

1 个答案: