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

Do you mean something like [this](https://codepen.io/anon/pen/pwPJxK)? — Huelfe, Jun 20 '17 at 13:01

score 3 · Answer 1 · answered Jun 20 '17 at 13:06

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>

score 2 · Answer 2 · edited Jun 20 '17 at 14:44

.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>

Michael Benjamin · Accepted Answer · 2017-06-20T14:49:03.310

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

score -1 · Answer 4 · answered Jun 20 '17 at 13:02

-1

use position: absolute not relative in .overlay

answered Jun 20 '17 at 13:02

clarkoy

410
3
16

z-index not working in a flex container

4 Answers4