为什么#opacwall 覆盖#moviechoose?
<div id="moviechoose" style="width: 50px;height: 50px;background: #f2c249;border: none;position:absolute;left:50px;top:50px;z-index:1;border-radius:130px; display: none;"></div>
JQuery:
$('.circlemenubutton').click(function(){
$('#moviechoose').show(200);
$('<div/>', {
'id':'opacwall',
'style':' width: 100%;height: 100%;background: black;border: none;position:fixed;left:0%;top:0%;z-index:0;opacity:0.6'
}).appendTo('body');
});
最佳答案
这是我认为您正在尝试做的事情的工作演示 https://jsfiddle.net/mzg1v0q5/使用 jQuery-2.1.3
人们经常对 z-index 感到困惑,所以我建议阅读这篇文章以充分理解它:http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
关键信息(在我看来)是因为 z-index 仅适用于 position 属性已明确设置为绝对、固定或相对的元素
。您已在示例代码中完成此操作,因此希望查看发布的 fiddle 会对您有所帮助。
关于javascript - Z-index 坏了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31485525/