CSS z-index问题：在Firefox中工作，但不是Safari？ [英] CSS z-index issue: works in Firefox, but not Safari?
问题描述
我想在重叠广告上方显示特定的表格列。它在Firefox中工作，但不是Safari。我不明白这是怎么可能的，因为Firefox和Safari通常渲染这些类型的东西是一样的。
I am trying to show a specific table row on top of an overlay. It's working in Firefox, but not Safari. I don't understand how that can be possible since Firefox and Safari usually render these types of things the same.
<body>
<style>
.overlay {
position:absolute;
width:100%;
height:100%;
background:#000;
opacity: 0.5;
}
</style>
<table>
<tr style="position:relative; z-index:1000; background:#fff;">
<td>show this one on top</td>
</tr>
<tr>
<td>Show these below</td>
</tr>
<tr>
<td>Show these below</td>
</tr>
<tr>
<td>Show these below</td>
</tr>
</table>
<div class="overlay"></div>
</body>
这会导致Safari和Firefox之间的区别吗？
What could it be that is causing this difference between Safari and Firefox?
推荐答案
根据 CSS 2.1规范：
'position：relative'对table-row-group，table -header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素。
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
我假设Firefox以一种方式实现它，而WebKit以不同的方式实现它，两者都是正确的，因为它是未定义的。这里的故事的道德不是在表元素上指定位置。
I'm assuming that Firefox implements it one way, and WebKit implements it a different way and both are correct since it is undefined. The moral of the story here is not to specify a position on table elements.
我能够通过将每个表单元格的内容包装为 div 并定位div。我还将覆盖层移到了我所定位的表行内（不确定是否必要）。
I was able to get it to work by wrapping the contents of each table cell with a div and positioning the div. I also moved the overlay inside of the table row that I was targeting (not sure if that was necessary).
<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="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>
这篇关于CSS z-index问题：在Firefox中工作，但不是Safari？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
