使用Bulma框架，我试图在图像的右上角放置一个按钮，但它只显示在图像的底部。 我尝试使用对齐内容和弹性，但按钮仍在底部
.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>您需要将按钮放在图形标签内，并赋予它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 样式更可取。
我不知道 Bulma 框架，所以也许有一种方法可以使用框架的类来实现它，我让你在框架文档中搜索。
但这里有一个工作示例来解释你的想法：
您需要使用z-indexCSS 属性 whitch 允许您指定一个元素相对于另一个元素(叠加(的级别。
为此，每个元素都需要有一个position(z-index 需要它(。
因此，我将两个元素(图形和按钮(包装在一个具有"相对"位置的"容器"中(有关CSS位置的更多信息(。
然后我也有一个相对于图形的位置(因为它不会移动，我只需要它来设置 z 索引(，并将 z 索引设置为 1。
最后，按钮获得"绝对"位置(相对于最接近的包装元素的位置：在我们的示例中，它将是"容器"，这就是他的目的(，并且 z 索引为 3(大于它的图像将显示在它的 p 上(。 当只需将位置设置在顶部/右侧时，瞧！
重要说明：我必须添加!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>