Наложение элемента поверх изображения

107

21 ноября 2020, 12:40

Как наложить такой же крестик <i> поверх изображение в правый верхний угол?

//Изображение
<img src="https://i.imgur.com/YdOIzy1.jpg">
// Крестик
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<i class="zmdi zmdi-close"></i>

Answer 1

<div class="wrapper__img">
  <img src="https://i.imgur.com/YdOIzy1.jpg" alt="">
  <i class="zmdi zmdi-close"></i>
</div>
.wrapper__img {
position: relative;
}
.zmdi {
position: absolute;
top: 0;
right: 0;
}

Answer 2

Для того, чтобы сделать такое, нужно использовать position: absolute; для вашей иконки.
Ещё, иконке и картинки нужен родительский элемент, и чтобы всё не "полезло" нужно родителю установить position: relative;

.image { 
  display: block; 
  width: 300px; 
  height: 250px; 
  position: relative; 
} 
 
.image img { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 
 
/* Вам нужно вот это */ 
.image i { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
}

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/> 
 
<div class="image"> 
  <img src="https://bipbap.ru/wp-content/uploads/2017/08/16.jpg"> 
  <i class="fas fa-times"></i> 
</div>