Question

我有一个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>的位置从页面的左上角开始，而不是{{1}我能做些什么呢？（我应该提一下，我应该用一张桌子来设计。我不能在这里使用其他任何东西）

Answer 1

我有这个 EXACT 相同的问题，发现上述答案都没有修复它，然后在另一个线程中找到了一个解决方案，为我的项目修复了它。

将display: block;放在td的父div上。就是这样。

您可能有兴趣知道我使用您的示例代码对此进行了测试并使其正常工作，而在我迄今为止测试的其他浏览器中没有负面影响。您的里程可能会根据项目的需要而有所不同。

一个缺点是它确实杀死了td身份 - 对于某些表格布局，你需要额外的CSS技巧来重新格式化，对于其他人来说这可能是不可行的。

我找到答案的链接： Using Position Relative/Absolute within a TD?

Answer 2

给父母position:relative，你就完成了。

Firefox从页面的左上角开始div的绝对定位，而不是div的父级

2 个答案: