table中css定位差異

關於css定位有很多文章講述：

如果有一個元素div ，他的position屬性設置爲absolute，那麼這個div 的位置取決於其父元素中position值設置爲relative的元素。如果在其父元素中沒有一個元素的position值是relative、absolute、或者fixed，那麼這個div位置將以 body位置爲參考。

但是對於 firefox來說似乎不是每個元素都遵從這一規則，有如下一段代碼

table{
	margin-left: 100px;
	margin-top: 50px;
}
td{
	height: 150px;
	width: 100px;
	position: relative;
}
td div{
	height: 30px;
	width: 50px;
	background-color: red;
	position: absolute;
	left: 10px;
	top:50px;
}
<table border="1">
	<tr>
		<td></td>
		<td></td>
		<td>
			<div>這是一個position：absolute元素</div>
		</td>
	</tr>
</table>

由於div元素的尺寸較小，理想的情況是div總是在最後一個td中，但是在firefox中div並不以td爲參考，而是body。

所以要實現這個效果的兼容方式是在td中添加一個能應用position：relative的元素，上述代碼可以更改爲

<table border="1">
	<tr>
		<td></td>
		<td></td>
		<td>
                      <div style="position:relative;"
			<div>這是一個position：absolute元素</div>
                      </div>
		</td>
	</tr>
</table>

這樣就可以保證 div元素始終在td中