css - ionic 如何在图像旁边添加按钮

Question

我正在开发一个Ionic 3 应用，我想要一个按钮，在图像小添加图标 >。看起来像这样。

喜欢图片旁边的小绿色添加图标。

这是我制作的图片的 html 波纹管。

<ion-col col-4>
    <img [src]="image" [hidden]="!image">
    <img src="assets/imgs/avatar-placeholder.png" [hidden]="image">
  </ion-col>

和scss

img {
    display: block;
    border-radius: 100px;
    border: 1px solid #fff;
    width: 80px;
    height: 80px;
    margin: 30px auto 0;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
    margin-top: 0px;
}

下面是我的图片的结果。

我只想要第一张图片中的小绿色添加图标。

感谢有人能提供帮助提前致谢。

Answer 1

在图标上使用position: absolute。

An absolutely positioned element is an element whose computed position value is absolute or fixed.

div {
  position: relative;
  width: fit-content;
}

div > .icon {
  position: absolute;
  right: 12px;
  bottom: 20px;
  width: 50px;
}

<div>
  <img src="https://www.esparkinfo.com/wp-content/uploads/2016/08/default-avatar.png" alt="">
  <img class="icon" src="https://findicons.com/files/icons/985/affel/128/add.png" alt="">
</div>