Jquery z-index:20显示在z-index:10下，即使其z-index:10更大

我正在试着做一个灯泡。这是密码

HTML

---

在我的脑海中，当我点击

按钮时，
#add
必须出现在
#black
的顶部，因为它的z索引（20）大于
#black
（10）。但它会出现在黑色的
下。谢谢你的帮助。
这是因为
z-index
属性

位置
属性的默认值为
静态
。如果您向该元素添加了
position:relative
，它将按预期工作

z索引仅适用于定位元素。您的#add元素未定位，因此z索引被忽略，默认的
0
索引适用。
<input class="button" type="button">
<div id="black" style="display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(51,51,51,0.7); z-index: 10;"></div>

<div id="add" style="z-index: 20; display:none; border: 2px solid;">
    <input type="text" >
</div>

$('.button').click(function() {
    $('#add').show();
    $('#black').show();
})