圖片拒絕在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 。