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

i am trying to make a lightbulb. here is codes 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();
})

in my mind when i hit .button , #add must be appear on top of #black because of its z-index(20) bigger than #black (10). but it appears under the #black. thanks for helping.


solution

It’s because the z-index property only applies to positioned elements.

The default value for the position property is static. If you added position: relative to that element, it would work as expected.

Updated Example