Question

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

<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; Here is a 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' });
});

Answer 3

将position属性添加到table。我想在你的情况下你需要position: relative;。

如果元素没有设置z-index属性，

position将永远不会有效。

table {
    position: relative; /* this is required for z-index */
    background-color: white;
    height: 300px;
    width: 300px;
}

这是一个有效的jsfidle：http://jsfiddle.net/Smartik/u96coj0q/3/

这是另一个将JS最小化并使用更多CSS的示例：http://jsfiddle.net/Smartik/u96coj0q/5/

Answer 4

另一种方法是创建一个或多个类，并使用.addClass（）或.toggleClass（）

调用它们。

.zindex60 {z-index:60;}

$('button').click(function() {
   $('body').append("<div class='overlay'></div>");
   $('table').addClass('zindex60');
});

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

4 个答案: