图像拒绝在 div 中覆盖另一个图像答案

【问题标题】：Image refuses to overlay another image within div图像拒绝在 div 中覆盖另一个图像
【发布时间】：2019-03-04 22:19:02
【问题描述】：

我似乎无法让这个图标适合这个 div。我有一个包含第一个图像（以及第二个图标图像）的 div。父 div 有一个透明的背景覆盖。然后，图像。现在，我试图让图标覆盖，但它似乎是根据 inline-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;
}

【问题讨论】：

标签： html css django image overlay

【解决方案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。

【讨论】：

太棒了！很多爱。