代码之家 › 专栏 › 技术社区 › Andrew

Safari和Chrome CSS表格行定位z索引问题(适用于Firefox)

z-index safari google-chrome firefox css

Andrew · 技术社区 · 14 年前

我有一个问题,似乎只影响Safari和Chrome(又名WebKit)。我有一个覆盖整个屏幕,和两个表行,我想出现在上面的覆盖。页面上的所有其他内容都应显示在覆盖图下方。

<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');

screenshot

1 回复 | 直到 13 年前

Andrew 14 年前

根据 CSS 2.1 specifications :

的影响位置:相对'在表行组、表页眉组、表页脚组、表行、表列组、表列、表单元格和表标题元素中未定义。

我能让它工作,通过包装的内容,每个细胞的一个 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>

推荐文章

user3425506 · 没有互联网连接无法获得PWA

4 月前

sunics · jQuery在ul中查找li元素

11 月前

Marlon · 在Navigationextras中传递大数据router.navigation Angular 16导致Firefox错误

1 年前

Curious66 · 如何在谷歌会议中捕获传入的音频流

1 年前

Tricotou · $.get(code_url)执行返回的代码,不使用eval(),也不将其附加到DOM。jQuery安全性失败?

1 年前

ÙØÙØ¯ Ø§ÙÙÙ · 使用sendMessage功能时从Chrome扩展程序获取数据的延迟

1 年前

Patrick Potocny · Next.js 14草稿模式在iframe中不起作用(无头CMS预览)

1 年前

Vrushabh Ranpariya · 谷歌Chrome-开发工具-网络选项卡:设计更新

1 年前

Johnny Chen · 相同的字体在chrome和firefox中的显示方式不同

1 年前

Alexander Mills · Flutter不将Chrome识别为“web”,反之亦然

1 年前