Firefox 是否支持 position: relative 在表格元素上？答案

【解决方案1】：

应该没问题。记得还要设置：

display: block;

【讨论】：

设置 display: block 的缺点似乎是，如果直接应用于元素，它可能真的会弄乱表格格式。因为它正在从表格单元格中改变它......还是我疯了？
@Ben：嗯，是的。根据定义，在表格单元格上设置position 会严重改变表格格式。您将单元格的块从流中取出（position: relative 除外，它保留在流中但从流中偏移）。
@Ben - 不，不是疯了。你肯定需要做更多的工作才能让事情看起来像你想要的那样。关键在于它是可能的。
@TJ 不是添加 position: relative 会改变视觉外观，而是将 th/td 从 table-cell 更改为 block。同样，很高兴知道它可以工作，但在很多情况下，创建块级元素会真正弄乱表格格式。谢谢贾斯汀！
唉，display: block 也可能在 Firefox 中引起问题——即如果表格单元格跨列，将其设置为阻止会将单元格折叠到第一列。

【解决方案2】：

从 Firefox 3.6.13 开始，位置：相对/绝对似乎不适用于表格元素。这似乎是长期存在的 Firefox 行为。请参阅以下内容：http://csscreator.com/node/31771

CSS Creator 链接发布了以下 W3C 参考：

'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table 的影响-caption 元素未定义。 http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

【讨论】：

查看贾斯汀的回答。只要您更改display 设置，它就可以工作。这是有道理的（在某种程度上 CSS 是有道理的）。
是的，它“有效”，只是将其应用于单元格会完全破坏您的表格......在那种情况下有点毫无意义。

【解决方案3】：

最简单和最合适的方法是将单元格的内容包装在一个 div 中并添加 position:relative 到该 div。

示例：

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

【讨论】：

+1 这是唯一对我有用的解决方案。使用tr {display:block} 完全破坏了布局。
+1 这也是我的答案。 display: block 不足以修复复杂的表格布局。额外的 div 是更可靠的解决方案。
但是，使用此解决方案“宽度”和“高度”仍然无法使用
@4esn0k 你找到可以使用宽度和高度的解决方案了吗？
不幸的是，如果您添加的另一列内容比另一列多，您的解决方案不起作用。所以我不明白“接受的答案”标志和投票所给予的高度赞赏。请查看jsfiddle.net/ukR3q

【解决方案4】：

尝试使用display:inline-block，它在 Firefox 11 中对我有用，让我能够在 td/th 内进行定位，而不会破坏表格的布局。与 td/th 上的 position:relative 结合使用应该可以使事情正常进行。自己搞定了。

【讨论】：

【解决方案5】：

向父元素添加 display:block 可以在 firefox 中使用。我还必须添加 top:0px;左：0px；到 Chrome 工作的父元素。 IE7、IE8 和 IE9 也可以正常工作。

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>

【讨论】：

【解决方案6】：

由于包括 Internet Explorer 7、8 和 9 在内的每个 Web 浏览器都能正确处理 table-display 元素上的 position:relative 并且只有 FireFox 处理不正确，所以最好的办法是使用 JavaScript shim。你不应该只为一个有问题的浏览器重新排列你的 DOM。当 IE 出现问题而所有其他浏览器都正确时，人们总是使用 JavaScript 填充程序。

这是一个完整注释的 jsfiddle，其中包含所有 HTML、CSS 和 JavaScript 的解释。

http://jsfiddle.net/mrbinky3000/MfWuV/33/

我上面的 jsfiddle 示例使用“响应式网页设计”技术只是为了表明它可以与响应式布局一起使用。但是，您的代码不必是响应式的。

这是下面的 JavaScript，但脱离上下文并没有太大意义。请查看上面的 jsfiddle 链接。

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

【讨论】：

$.browser 在 jQuery 1.9 中被删除
是的。所以用你最喜欢的浏览器检测方法代替。
浏览器没有故障。规范说效果是未定义的。
@WGH 不会让解决方案变得不那么正确。感谢您的反对。
嘿，我刚刚从您的提交中创建了一个 polyfill，看看它！ :) github.com/Grawl/gecko-table-position-polyfill

【解决方案7】：

我有一个 table-cell 元素（实际上是 DIV 而不是 TD）

我换了

display: table-cell;
position: relative;
left: .5em

（在 Chrome 中工作）与

display: table-cell;
padding-left: .5em

当然，在盒子模型中，填充通常被添加到宽度中 - 但表格似乎总是在谈到绝对宽度时有自己的想法 - 所以这在某些情况下会起作用。

【讨论】：

【解决方案8】：

从 Firefox 30 开始，您将能够在表格组件上使用 position。您可以自己尝试使用当前的夜间构建（独立工作）：http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

测试用例（http://jsfiddle.net/acbabis/hpWZk/）：

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

您可以在此处继续关注开发者对更改的讨论（主题已有 13 年历史）：https://bugzilla.mozilla.org/show_bug.cgi?id=63895

根据recent release history 判断，最早可能会在 2014 年 5 月推出。我几乎无法抑制自己的兴奋！

编辑（2014 年 6 月 10 日）： Firefox 30 于今天发布。很快，表格定位在主流桌面浏览器中将不再是问题

【讨论】：

【解决方案9】：

可接受的解决方案类型有效，但如果您添加另一列内容比另一列更多，则无效。如果您将 height:100% 添加到您的 tr、td 和 div 中，那么它应该可以工作。

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        This will be positioned normally
        <div style="position:absolute; top:5px; left:5px;">
             This will be positioned at 5,5 relative to the cell
        </div>
    </div>
  </td>
</tr>

唯一的问题是这只修复了 FF 中的列高问题，而不是 Chrome 和 IE。所以它更接近了一步，但并不完美。

我更新了 Jan 的一个小提琴，它不能与接受的答案一起使用，以表明它可以正常工作。 http://jsfiddle.net/gvcLoz20/

【讨论】：