html - z-index 在 flex 容器中不工作

Question

我创建了一个包含 3 个 flex 元素的 flex 容器。

第一个 flex 元素包含 2 个类(.flex-item 和 .overlay)。

我想在 flex 元素上叠加图像。我通过添加 z-index 和位置来尝试它，但它不起作用。

.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

您的支票是背景，房子是内容，因此背景不能高于内容。将检查移动到另一个元素。

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