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指数更大

1 个答案: