在css网格中的图像角落显示关闭（X）按钮答案

【问题标题】：Displaying close (X) button in corner of image in css grid在css网格中的图像角落显示关闭（X）按钮
【发布时间】：2019-01-25 01:29:48
【问题描述】：

我在响应式 CSS 网格中有不同大小和 x/y 比率的图像。我需要在每张图片的右上角有一个 ✖️ 按钮。因此，在每个网格单元格中，我放置了一个表单，并在表单内部 - 一个按钮和一个图像：

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

问题：

如何将按钮的中心放置在图片的一角？
如何获得更好看的 ✖️ 按钮（我使用 Bootstrap 4）？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

要获得右上角的“X”，您可以这样做：

.AClass{
    right:0px;
    position: absolute;
}

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

为了获得更好的交叉，我建议使用 Font Awesome 或其他一些变体。

【讨论】：

这会将图像移到网格单元之外

【解决方案2】：

您可以根据自己的角度调整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>

【讨论】：

它可以工作，但是按行：每行的所有 X 按钮都在每行的最右边的图像/单元格上
你在说什么，我听不懂
我在网格的每一行都有 3 个图像 - 当我按照你的建议使用 css 时 - 所有三个 X 按钮都在同一个位置（一个在另一个之上） - 在最右边的图像的角落行
非常感谢 - 顺便说一句，由于某种原因，我在您的第一个 sn-p 中看到该按钮看起来像一个矩形 X 按钮，而在第二个 sn-p 中，它只是“x” .你知道这是什么原因吗？
因为我使用了 JamesS 的解决方案。我赞成你的回答，这也很有帮助，谢谢