z-index not working in a flex container - html

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>

Answer 2

In your CSS, the .overlay class establishes a background image on the parent element.
In your HTML, the img element places an image as a child of the .overlay parent.
Per the rules of z-index stacking contexts, a child cannot appear behind the parent. Therefore, the background image (parent) cannot appear in front of the img (child).
That's why your img is always out front, irrespective of z-index.
But there is an easy solution to this problem. Use an absolutely-positioned pseudo-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;
min-height: 100px;
display: flex;
flex-direction: column;
position: relative;
}
img {
width: 100%;
min-height: 0; /* https://stackoverflow.com/q/36247140/3597276 */
}
.overlay::after {
background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background-size: contain;
opacity: 0.6;
content: "";
}
<div class="flex-container">
<div class="flex-item overlay">
<img src="http://7bna.net/images/home-images/home-images-0.jpg" />
</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
revised codepen

Answer 3

.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align:center;
}
<div class="container">
<img src="http://7bna.net/images/home-images/home-images-0.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><img src="https://image.freepik.com/free-icon/check-circle_318-31777.jpg" width="50%" />
</div>
</div>
</div>

Answer 4

use position: absolute not relative in .overlay