Safari 和 Chrome CSS 表格行定位 z-index 问题（适用于 Firefox）答案

【问题标题】：Safari and Chrome CSS table row positioning z-index issue (works in Firefox)Safari 和 Chrome CSS 表格行定位 z-index 问题（适用于 Firefox）
【发布时间】：2011-04-20 22:50:56
【问题描述】：

我有一个似乎只影响 Safari 和 Chrome（又名 WebKit）的问题。我有一个覆盖整个屏幕的覆盖层，以及两个我想出现在覆盖层顶部的表格行。页面上的其他所有内容都应显示在叠加层下方。

问题在于 Safari 仅在顶部显示其中一个表格行。 Firefox 正确显示在顶部。我似乎无法在 Safari 中找到此问题的根本原因，但我知道我不是唯一遇到“在 Firefox 中有效的 Safari 定位问题”的人。

我应该怎么做才能在 Firefox 和 Safari/Chrome 中都能正常工作？

<body>

    <style>
        .ui-widget-overlay {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
        }
    </style>

    <table>
        <tr style="position:relative; z-index:1000;">
            <td>Displays on top in Firefox only</td>
        </tr>
        <tr>
            <td>
                <div style="position:relative; z-index:1000;">
                    Displays on top in both Safari and Firefox
                </div>
                <span class="ui-widget-overlay"></span>
            </td>
        </tr>
        <tr>
            <td>Displays below overlay</td>
        </tr>
        <tr>
            <td>Displays below overlay</td>
        </tr>
        <tr>
            <td>Displays below overlay</td>
        </tr>
    </table>

</body>

更新：显然上面的代码示例正确显示。但是，这只是一个示例。这不是实际的代码。 HTML 是相同的，但我使用 JavaScript 动态应用样式。

也许问题出在 jQuery 上？我正在使用这一行将定位添加到第一个表格行：

$(firstTableRow).css('position', 'relative').css('z-index', '1000');

在 Firefox（使用 Firebug）中，我可以看到正在应用该样式，但是在 Safari（使用 Web Inspector）中，它说该表格行的“计算样式”是静态定位的，z-index 为 auto，即使“样式属性”样式说位置是相对的并且 z-index 是 1000。

【问题讨论】：

我刚刚在 jsfiddle 中尝试过，在 Chrome 中尝试过 works fine（在 Windows 7 上）。
您使用的是哪个版本的 Safari/Chrome？在 Safari 5.0.2 (6533.18.5) 中，一切正常。
我也有这个问题。 jsbin.com/zageg/4

标签： css firefox google-chrome safari z-index

【解决方案1】：

根据CSS 2.1 specifications：

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

我假设 Firefox 以一种方式实现它，而 WebKit 以不同的方式实现它，两者都是正确的，因为它是未定义的。这里故事的寓意不是在表格元素上指定位置。

我能够通过使用div 包装每个单元格的内容并定位 div 来使其工作。

<table>
    <tr>
        <td>
            <div style="position:relative; z-index:1000;">
                Displays on top in both Safari and Firefox
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="position:relative; z-index:1000;">
                Displays on top in both Safari and Firefox
            </div>
            <span class="ui-widget-overlay"></span>
        </td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
</table>

【讨论】：