z-index:20 出现在 z-index:10 下面，即使它的 z 索引更大

Question

我正在尝试制作一个灯泡。这是代码 JSfiddle

HTML

<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>

Jquery

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

在我看来，当我点击 .button 时，#add 必须出现在 #black 之上，因为它的 z-index(20) 大于 #black （ 10).但它出现在 #black 下。感谢您的帮助。

Answer 1

因为 z-index 属性 only applies to positioned elements.

position 属性的默认值为 static。如果您将 position: relative 添加到该元素，它将按预期工作。

Updated Example

z-index:20 出现在 z-index:10 下面，即使它的 z 索引更大

z-index:20 appears under the z-index:10 even if its z index bigger

css

jquery

z-index