z-index not working in a flex container

Question

I have created a flex container with 3 flex items.

First flex item contains 2 classes (.flex-item and .overlay).

I want to overlay image over the flex item. I tried it by adding z-index and position but it's not working.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  margin-right: 50px;
  margin-bottom: 50px;
  flex: 0 0 15em;
  border: 2px solid red;
  height: 100px;
}

.overlay {
  background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
  background-size: 100px 80px;
  z-index: 110;
  position: relative;
  opacity: 0.6;    /* Real browsers */
  filter: alpha(opacity=60);   /* MSIE */
  height: 170px;
}

<div class="flex-container">
  <div class="flex-item overlay">
    Image
    <img src="http://7bna.net/images/home-images/home-images-0.jpg" />
  </div>
  <div class="flex-item">
  </div>
  <div class="flex-item">
  </div>

</div>

Please see the code in codepen

Answer 1

Your check is background and house is content so background can't be above content. Move check to another element.

.flex-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }

.flex-item{
  margin-right: 50px;
  margin-bottom: 50px;
  flex: 0 0 15em;
  border:2px solid red;
  height:100px;
}

.overlay:before {
  background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
  background-size: 100px 80px;
  z-index: 110;
  position: absolute;
  opacity: 0.6; /* Real browsers */
  filter: alpha(opacity=60); /* MSIE */
  height: 170px;
  width: 170px;
  display: block;
  content: '';
}

<div class="flex-container">
  <div class="flex-item overlay">
    Image
    <img src="http://7bna.net/images/home-images/home-images-0.jpg" />
  </div>  
  <div class="flex-item">
  </div>  
  <div class="flex-item">
  </div>  
  
</div>