图片拒绝在div

Question

我似乎无法使该图标适合此div。我有一个包含第一张图片的div（以及第二张图标图片）。父div具有透明的背景覆盖。然后，图像。现在，我试图覆盖该图标，但它似乎是根据内联块属性运行的。

谢谢。

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