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