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>
source to share
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>
source to share
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>
source to share
.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>
source to share