Отображение кнопки закрытия (X) в углу изображения в сетке CSS

Question

У меня есть изображения разных размеров и соотношений х / у в гибкой сетке CSS. Мне нужна кнопка in в правом верхнем углу каждого изображения. Поэтому в каждую ячейку сетки я помещаю форму, а внутри формы - кнопку и изображение:

<form action="/destroyImage" method="POST">
  <button type="submit" class="close">
    <span>&times;</span>
  </button>
  <img src="/pub/myimage123.jpg"/>
</form>

Вопросы:

1. Как разместить центр кнопки в углу изображения?
2. Как мне получить более привлекательную кнопку ((я использую Bootstrap 4)?

Answer 1

Вы можете настроить right в соответствии с вашей перспективой

button{
  position: absolute;
  z-index: 1;
  right: 0;
}
img {
  position: relative;
  width: 100%;
}

<form action="/destroyImage" method="POST">
  <div class="1st">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
  <div class="2nd">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
  <div class="3rd">
    <button type="submit" class="close">
      <span>&times;</span>
    </button>
    <img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
  </div>
</form>

ДЛЯ СЕТКИ

Вы можете использовать position-absolute и position-relative BS4 класс для изображения и кнопки

button{
  position: absolute;
  z-index: 1;
  right: 20px;
}

img {
  position: relative;
}

button span {
  color: red; // for testing purpose
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<form action="/destroyImage" method="POST">
  <div class="row">
    <div class="col-4">
      <div class="1st">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
    <div class="col-4">
      <div class="2nd">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
    <div class="col-4">
      <div class="3rd">
        <button type="submit" class="close">
          <span>&times;</span>
        </button>
        <img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
      </div>
    </div>
  </div>
</form>

Answer 2

Чтобы получить «X» в правом верхнем углу, вы можете сделать: