Z-index not working in flex container
I created a flex container with 3 flex items.
The first flex element comprises a Class 2 ( .flex-item
and .overlay
).
I want to overlay an image on a flex item. I tried this by adding z-index
and position, but it doesn't work.
.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>
Look at the code in codepen
In your CSS, the class .overlay
sets the background image of the parent element.
In your HTML, the element img
is placing the image as a child of the parent .overlay
.
According to the rules of stacking contexts, a child cannot appear behind a parent. Therefore the background image (parent) cannot appear before (child). z-index
img
This is why yours img
always goes beyond, no matter what 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>
modified code
Your validation is the background and the house is the content, so the background cannot be higher than the content. Move the check to a different 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>
.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>
use position: absolute
not relative
in.overlay