使用Bulma框架实现按钮置于图片右上角的问题求助

嗨，我来帮你搞定这个按钮定位的问题！你现在的问题根源在于按钮和图片容器是同级元素，而且没有设置正确的定位规则，所以按钮自然会显示在图片下方。咱们只需要调整结构和定位方式就能解决：

核心思路 #

• 把按钮放到图片的容器（<figure>）内部，让它成为图片的兄弟元素
• 给容器设置相对定位，这样内部的绝对定位元素会以容器为基准
• 给按钮设置绝对定位，通过调整top和right值，把它固定在右上角

修改后的代码 #

CSS部分

.image-container {
  position: relative;
}

.image-container .delete {
  position: absolute;
  top: 10px; /* 可根据需求调整距离顶部的距离 */
  right: 10px; /* 可根据需求调整距离右侧的距离 */
}

HTML部分

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<figure class="image is-128x128 image-container">
  <img src="https://bulma.io/images/placeholders/256x256.png">
  <a class="delete is-medium"></a>
</figure>

为什么这样改？ #

• position: relative给<figure>创建了定位上下文，内部的绝对定位元素会相对于它计算位置
• position: absolute让按钮脱离正常文档流，不会影响图片布局，同时能精准控制位置
• 把按钮放到<figure>内部，确保它和图片属于同一个容器，定位逻辑才会生效

如果你想更贴合Bulma的原生风格，也可以用Bulma自带的is-position-relative类代替自定义的image-container，代码会更简洁：

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

这样调整后，按钮就会乖乖待在图片的右上角啦～

内容的提问来源于stack exchange，提问作者user9644796