html - 图像拒绝覆盖 div 中的另一个图像

Question

我似乎无法让这个图标适合这个 div。我有一个包含第一个图像(以及第二个图标图像)的 div。父 div 有一个透明的背景覆盖。然后，图像。现在，我正在尝试让图标覆盖，但它似乎是根据内联 block 属性运行的。

提前致谢。

<div class="slide">
  <div class="imageoverlay">
    <img class="slide-img z-depth-5" src="{% static 'projectweekapp/images/7.jpg' %}" alt="">
    <img class="footer-icon" src="{% static 'projectweekapp/images/heart_white.png' %}" alt="">
  </div>
</div>

.slide{
  width: 100%;
  display: block;
  margin-bottom: 3px;
  vertical-align: top;
}

.imageoverlay{
 min-width: 100%;
 max-width: 100%;
 background: linear-gradient(to top,
    rgba(0,0,0, .7) 15%,
    rgba(255,255,255, 0) 70%
 );
}

.slide-img{
  max-width: 100%;
  min-width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  position: relative;
  z-index: -1;
}

.footer-icon{
  max-width: 20px !important;
  max-height: 20px !important;
  position: absolute;
  z-index: 1;
}

Answer 1

检查一下:

.slide{
  width: 100%;
  display: block;
  margin-bottom: 3px;
  vertical-align: top;
  position: relative;
}

.imageoverlay{
 min-width: 100%;
 max-width: 100%;
 background: linear-gradient(to top,
    rgba(0,0,0, .7) 15%,
    rgba(255,255,255, 0) 70%
 );
}

.slide-img{
  max-width: 100%;
  min-width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  position: relative;
}

.footer-icon{
  max-width: 20px !important;
  max-height: 20px !important;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

将 position: relative 添加到 .slide 并将 bottom: 0 添加到 .footer-icon。