jQuery:css z-index无法正常工作

Question

我正在尝试让我的表格显示在叠加层的顶部.到目前为止这么糟糕.请帮忙.

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

为了z-index工作,添加position: relative或position: absolute; 这是一个jsfiddle

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

Answer 2

你可以添加$('table').css({ 'position': 'relative' });到你的点击事件

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