z-index not working to get an element above the overlay

Question

I have a horizontal list boxes which is overlapped by a pop up overlay. And horizontal boxes are structured using ui li

Now the question is, how to get the single box above the overlay using z-index. In my example I need to get the li which has class name .test above the overlay div.

.wrapper { position: relative }

ul li {
  margin:0;
  padding:0
}

li {
  background:yellow;
  display:inline-block;
  width:60px;
  height: 60px;

}

.overlay {
  background: rgba(0,0,0,0.5);
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10
}

.test {
  z-index:100 /*not working */
}

DEMO

Answer 1

z-index property works on positioned elements. You could add position: relative; to the element to get the z-index property to work:

.test {
  z-index:100;
  position: relative;
}

WORKING DEMO

Answer 2

Add a position: relative; to your test class