我有一个问题,似乎只影响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');
