我有一个div，其中有一个表。该表有一行和两列。我想在第二列中有一个div，并且我希望它位于表列的绝对位置（而不是页面的开头）
这是html文件：
<body>
<div id="one">
<table id="table">
<tr id="two">
<td id="three"></td>
<td id="three">
<div id="four"></div>
</td>
</tr>
</table>
</div>
</body>
这就是CSS：
#one {
width: 100%;
height: 100px;
background-color: #f00;
}
#three {
width: 100px;
height: 80px;
background-color: #b6ff00;
/*margin-left: 100px;*/
/*float: left;*/
position: relative;
}
#four {
width: 50px;
height: 40px;
background-color: #0ff;
position: absolute;
left: 20px;
top: 20px;
}
这段代码在Chrome和IE上运行得很好。但在Firefox上不起作用。在Firefox中，<div id=four>的位置从页面的左上角开始，而不是<div id=three>。我该怎么办？（我应该提到的是，我的设计应该使用一个表。我不能在这里使用其他任何东西）
我遇到了EXACT相同的问题，没有发现上面的答案解决了它，然后在另一个线程中找到了一个解决方案，为我的项目解决了它。
将display: block;放在作为div的父级的td上。就是这样。
你可能有兴趣知道，我用你的示例代码测试了这一点，并使它也能正常工作，在我迄今为止测试过的其他浏览器中没有负面影响。根据项目的需要，您的里程数可能会有所不同。
一个缺点是它确实扼杀了td标识——对于某些表布局，您需要额外的CSS技巧来重新格式化，而对于其他表布局，这可能是不可行的。
链接到我发现的答案：在TD内使用相对/绝对位置？
给父级position:relative，就完成了。