css - 图片右上角的按钮

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

您需要将按钮放在 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>

当然，类中的外部CSS样式是更可取的。