CSS z-index issue: works in Firefox, but not 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>
What could it be that is causing this difference between Safari and Firefox?
According to the CSS 2.1 specifications:
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.
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.
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>
Safari and Firefox use different rendering engines, which would explain why they are behaving differently in this case. Safari uses WebKit, while Firefox uses Gecko.
加载中,请稍侯......
精彩评论