图片右上角的按钮

Question

使用 Bulma 框架，我试图在图像的右上角放置一个按钮，但它只显示在图像的底部。我尝试使用 justify-content 和 flex，但按钮仍然在底部

.justify-content-start {
  align-self: flex-start;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
<a class="delete is-medium justify-content-start" style="display:flex-row;"></a>

Answer 1

我不知道 Bulma 框架，所以也许有一种方法可以使用框架的类来实现它，我让你在框架文档中搜索。

但这里有一个工作示例可以向您解释这个想法：

您需要使用 z-index CSS 属性允许您指定一个元素相对于另一个元素（叠加）的级别。

为此，每个元素都需要有一个 position 到（z-index 需要它）。

所以我将两个元素（图形和按钮）包装在 "container" 中，位置为 "relative" (more info about CSS position)。

然后我也有一个相对于图形的位置（因为它不会移动，我只需要它来设置 z-index），并且 z-index 为 1。

最后，按钮获得 "absolute" 位置（相对于最近的具有位置的环绕元素：在我们的示例中它将是 "container"，这就是他的目的）和 z-index 3（大于它的图像将显示在它的 p 上）。只需将位置设置为 top/right 和 voilà!

重要说明：我必须添加 !important 标记以强制我的参数与框架设置的参数不同，以使其按预期工作（这仅作为示例，我强烈建议您搜索文档是否提供替代方案）。或者真正了解该框架的人也可以添加答案。

无论如何，我相信了解 CSS 的工作原理不会有什么坏处。

.container {
  position: relative;
  width: 128px;
}

.back-element {
  position: relative;
  z-index: 1;
}

.front-element {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  z-index: 3 !important;
  background-color: red !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div class="container">
  <figure class="image is-128x128 back-element">
    <img src="https://bulma.io/images/placeholders/256x256.png">
  </figure>
  <a class="delete is-medium front-element"></a>
</div>

Answer 2

您需要将按钮放在 figure 标签内并给它 css 属性 "position: absolute".

它可能看起来像这样：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/256x256.png">
  <a class="delete is-medium" style="position: absolute; top: 0; right: 0;"></a>
</figure>

当然，class 中的外部 css 样式更可取。

图片右上角的按钮

button top right of image

css

flexbox

bulma