jQuery：css z-index 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25344933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: css z-index not working
提问by Alex G
I'm trying to make my table to show on the top of the overlay class. So far so bad. Please help.
我试图让我的表格显示在覆盖类的顶部。到目前为止这么糟糕。请帮忙。
<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 });
});
回答by Brian Dillingham
For z-indexto work, add position: relativeor position: absolute;Here is a jsfiddle
为了z-index工作，添加position: relative或position: absolute;这是一个jsfiddle
table {
position: relative;
background-color: white;
height: 300px;
width: 300px;
}
回答by Nerdroid
you can just add $('table').css({ 'position': 'relative' });to you click event
你可以添加$('table').css({ 'position': 'relative' });到你的点击事件
$('button').click(function() {
$('body').append("<div class='overlay'></div>");
$('table').css('zIndex', '60');
$('table').css({ 'position': 'relative' });
});
回答by Ren
Another approach is to create a class or classes and call them with .addClass() or .toggleClass()
另一种方法是创建一个或多个类并使用 .addClass() 或 .toggleClass() 调用它们
.zindex60 {z-index:60;}
$('button').click(function() {
$('body').append("<div class='overlay'></div>");
$('table').addClass('zindex60');
});
回答by Andrew Surdu
Add positionproperty to table. I guess in your case you need position: relative;.
将position属性添加到table. 我想在你的情况下你需要position: relative;.
z-indexwill never work if the element does not have a positionproperty set up.
z-index如果元素没有position设置属性，则永远不会工作。
table {
position: relative; /* this is required for z-index */
background-color: white;
height: 300px;
width: 300px;
}
Here is a working jsfidle: http://jsfiddle.net/Smartik/u96coj0q/3/
这是一个有效的 jsfidle：http: //jsfiddle.net/Smartik/u96coj0q/3/
Here is another example that will minimize the JS and make use more of CSS: http://jsfiddle.net/Smartik/u96coj0q/5/
这是另一个可以最小化 JS 并使用更多 CSS 的示例：http: //jsfiddle.net/Smartik/u96coj0q/5/
