Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

但这是一个工作例子来解释你的想法：

您需要使用z-index CSS属性，以便指定与其他元素相关的元素级别（叠加）。

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

所以我将两个元素（图形和按钮）包含在一个“相对”位置（more info about CSS position）的“容器”中。

然后我也有一个相对于这个数字的位置（因为它不会移动，我只需要它来设置z-index），并将z-index设置为1.

最后，按钮获得“绝对”位置（相对于具有位置的最近包装元素：在我们的例子中它将是“容器”，这是他的目的），并且z-index为3（大于它的图像将显示在它的p上）。只需在顶部/右侧设置位置并vo！

重要说明：我必须添加!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属性“position： absolute ”。

看起来像这样：

select e.*
from exam_trans e
where Insert_DTM = (select max(e1.Insert_DTM)
                    from  exam_trans e1
                    where e1.Subject_id = e.Subject_id and
                          e1.Question_id = e.Question_id
                   );

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

按钮右上角的图像

2 个答案: