Изображение отказывается накладывать другое изображение в div - PullRequest
Новая
       21

Изображение отказывается накладывать другое изображение в div

0 голосов
/ 29 сентября 2018

Я не могу заставить эту иконку вписаться в этот div.У меня есть div, содержащий первое изображение (а также второе изображение-изображение).Родительский div имеет прозрачное наложение фона.Затем изображение.Теперь я пытаюсь наложить значок на наложение, но, похоже, он действует в соответствии со свойствами встроенного блока.

Заранее спасибо.

enter image description here

<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;
}

1 Ответ

0 голосов
/ 29 сентября 2018

Проверьте это: 

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

...