在相对元素Firefox中嵌套绝对元素[重复]答案

【问题标题】：Nesting Absolute Elements in Relative Elements Firefox [duplicate]在相对元素Firefox中嵌套绝对元素[重复]
【发布时间】：2012-03-27 07:47:42
【问题描述】：

可能重复：
Does Firefox support position: relative on table elements?

Firefox 会忽略表格单元格上的相对定位吗？

我试图在相对定位的表格单元格中嵌套一个绝对定位的元素，但 Firefox 忽略了表格单元格上的相对定位，并且绝对定位的元素是根据浏览器窗口定位的。

HTML：

<table><tbody><tr><td><span></span></td></tr></tbody></table>

CSS：

table{
    width:500px;
    height:50px;
}
td {
    position:relative;
    width:50%;
}
span {
    position:absolute;
    right:0;
    display:block;
    background:#333;
    width:20px;
    height:20px;
}

这是 jsfiddle 上的 example。

正确的格式是让 span 大约位于结果窗口的水平中心，但 Firefox 会将其一直定位到窗口的右侧。当元素保持绝对定位并且右/左/边距属性没有静态数字时，任何解决方法...谢谢。

【问题讨论】：

标签： css firefox html-table css-position

【解决方案1】：

添加

position: relative;

到你的餐桌上……

table{
    position: relative;
    width:500px;
    height:50px;
}

Here's an example

【讨论】：

啊，我明白了...但是为什么它不能与我的 HTML 一起使用？ jsfiddle.net/ecBm9
这个比较像。为什么不能使用表格的自然流动将元素保持在您想要的位置？为什么一定要绝对？在这里帮助我了解您的思考过程。
您可以将其相对定位，并保持在文本“我希望偶尔收到时事通讯电子邮件”的左侧。这就是你想要的对吗？还是你真的需要它留在屏幕的右侧？
元素必须绝对定位在 Webkit 浏览器中看看这个，你会看到我通过绝对定位复选框来完成什么。 jsfiddle.net/ecBm9/2
我说的是复选框...

【解决方案2】：

将position:relative 从td 移到table 上。

【讨论】：

【解决方案3】：

实际上，span 的顶部是放在表格单元格的中间——我猜是因为元素有一个绝对位置并且它在表格单元格中。

您可以设置一个负上边距，等于 span 元素大小的一半：

span {
    ...
    height:20px;
    margin-top: -10px; /* this one */
}

DEMO

【讨论】：

【解决方案4】：

这是真的，Firefox 确实忽略了它，根据 specs:

'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table 的影响-caption 元素是未定义。

一种常见的解决方案是使用display: relative 在单元格内放置一个分区，然后绝对定位将在其中起作用，但这实际上取决于您如何使用表格。如果您将其用于布局，我建议您找到另一种实现布局的方法。如果是表格数据，浮点数是否适合您？

【讨论】：

不幸的是，浮动不起作用...元素必须绝对定位