I have an issue that only seems to affect Safari and Chrome (aka WebKit). I have an overlay that fills the whole screen, and two table rows that I would like to appear on top of the overlay. Everything else on the page should be displayed below the overlay.
The problem is that Safari only displays one of the table rows on top. Firefox correctly displays both on top. I can't seem to find the root cause of this issue in Safari, but I know I'm not the only one who has had a "Safari positioning issue that works in Firefox".
What should I do in order to make this work in both Firefox and 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>
Update: Apparently the code sample above displays correctly. However, that is just a sample. It's not the actual code. The HTML is identical, but I am applying the styles dynamically with JavaScript.
Maybe the issue lies with jQuery? I'm using this line to add the positioning to the first table row:
$(firstTableRow).css('position', 'relative').css('z-index', '1000');
In Firefox (using Firebug) I can see that the style is being applied, however in Safari (using Web Inspector) it says that the "computed style" of that table row is statically positioned with a z-index of auto, even though the "style attribute" styles say that the position is relative and z-index is 1000.
