按钮右上角

Question

使用Bulma框架，我试图在图像的右上角放置一个按钮，但它只显示在图像的底部。我试着使用合理性内容和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 to (z索引需要它)。

因此，我将两个元素(图和按钮)封装在一个带有“相对”位置(有关CSS位置的更多信息)的“容器”中。

然后，我也有一个相对于图的位置(因为它不会移动，我只需要它来设置z索引)，和一个z索引为1。

最后，按钮得到“绝对”位置(相对于与位置最接近的包装元素:在我们的示例中，它将是“容器”，这是他的目的)，z-索引为3(大于它的图像将显示在它的p上)。当只是将位置设置在顶部/右边和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

您需要将该按钮放置在图标记中，并为其提供css属性“：绝对”。

它可能看起来像这样：

​

<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样式更好。