正确使用z-index

Question

我在css中有以下代码片段

<style>
#overload {
    background-color:black;
    opacity:0.6;
    position:fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color:#FFFFFF;  
}

  .test {
    width:50px; height:50px; background-color:white; color black; z-index:1000;
}
 </style>

HTML编码

<div id="overload"> </div>
<div class="test">Testing </div>

我想在“超载”层上方显示“测试”内容如何通过css实现它？因为我尝试使用z-index而没有按预期工作。

https://jsfiddle.net/gt7kk643/