javascript - Z-index 坏了

Question

为什么#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');
    });

Answer 1

这是我认为您正在尝试做的事情的工作演示 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 会对您有所帮助。