jQuery: css z-index not working

Question

I'm trying to make my table to show on the top of the overlay class. So far so bad. Please help.

http://jsfiddle.net/u96coj0q/

<table>
    <tr><td>Test</td></tr>
</table>
<button>Overlay</button>

table {
    background-color: white;
    height: 300px;
    width: 300px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 50;
}

$('button').click(function() {
        $('body').append("<div class='overlay'></div>");
        $('table').css('zIndex', '60');
        $('table').css({ zIndex: 60 });
});

Answer 1

you can just add $('table').css({ 'position': 'relative' }); to the click event

$('button').click(function() {
    $('body').append("<div class='overlay'></div>");
    $('table').css('zIndex', '60');
    $('table').css({ 'position': 'relative' });
});

Answer 2

For z-index to work, add position: relative or position: absolute; Here is a jsfiddle

table {
    position: relative; 
    background-color: white;
    height: 300px;
    width: 300px;
}