Как разместить иконку на картинке?

Question

[jazzus]

Код https://jsfiddle.net/z8bhs7pn/
Это карточка, которая сделана, как ссылка с помощью кода

<a href="https://yandex.ru/" class="stretched-link"></a>

Который на https://jsfiddle.net почему-то не работает, но у меня работает. Фишка в том что класс stretched-link согласно докам бустрапа, делает из карты ссылку.
Теперь вопрос.
Нужно разместить иконку сердечка в правом верхнем углу. Прямо на картинке. Сейчас это сердечко в левом нижнем углу. И иконка должна быть рабочей ссылкой. с учетом того, что сама карта является ссылкой и в моем коде перекрывает любые ссылки, которые находятся внутри карты (повторюсь на jsfiddle.net класс stretched-link не работает и соответственно никакие ссылки не перекрывает, но в моей разработке класс работает и перекрывает :)). В общем как разместить иконку-ссылку на картинке в данном коде?

Answer 1

[Maxim Kirshin]

Привет, это то что ты хотел? Если так, то почитай про position: absolute и position: relative
https://jsfiddle.net/meowto16/herjb2qg/8/

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">

<div class="row">
   <div class="col-xs-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
     <div class="card card-custom bg-white border-white">
       <div class="card-custom-img" style="background-image: url(https://cdn.1millionwomen.com.au/media/large_image/TooMuchStuff.jpg);"></div>
       <div class="card-body" style="overflow-y: auto">
         <h5 class="card-title">Название</h5>
           <a :href="#" style="position: relative;"><small>Ссылка</small></a>
         <p class="card-text"><small class="text-muted">Описание</small></p>
       </div>
       <div class="card-footer" style="background: inherit; border-color: inherit;">
         <a href="https://yandex.ru/" class="stretched-link"></a>
         <a href="#" class="card-custom__heart text-muted"><i class="far fa-heart"></i></a>
       </div>
     </div>
     
    </div>
  </div>

CSS

.card-custom {
  overflow: hidden;
  min-height: 450px;
  border: 0;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
  
  /* Позиционироваться только внутри него */
  position: relative;
}

.card-custom-img {
  height: 200px;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: inherit;
}

.card-custom__heart {
  /* Позиционируем сердечко */
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 50;
}

Comments

[jazzus]

То что нужно, спасибо!