將 ion-icon 放在 ion-avatar 右下邊框上

Question

得到這個頭像設計，顯示個人資料圖片、姓名和姓氏，以及一個用於更改個人資料圖片的圖標。

現在圖標太低了，我想讓它在圖像附近更高，可能在邊框上，但再靠近一點就可以了。 試圖盡可能接近這個設計：

到目前為止，這是我的代碼：

<ion-avatar class="profile-pic-container">
    <ion-img src="../../../assets/images/profile-pic.jpg"></ion-img>
    <ion-icon id="camera-icon" name="camera"></ion-icon>
</ion-avatar>

.profile-pic-container {
    height: 100px;
    width: 100px;
}

ion-avatar {
    // make the icon stay on the right
    text-align: right;
}

#camera-icon {
    font-size: 24px;
}

我嘗試將 ion-icon 放在 ion-img 標簽內，但它消失了，嘗試使用圖標的對齊和位置，但我要么以錯誤的方式思考它，要么用 css 不夠好，因為我只能設法做到留在左邊。

Answer 1

將容器設置為position: relative ，然后absolute定位相機圖標。

.profile-pic-container {
  position: relative;
  height: 100px;
  width: 100px;
}

ion-avatar {
  text-align: right;
}

#camera-icon {
  font-size: 24px;
  position: absolute;
  bottom: 12px; // tweak this
  right: 12px; // tweak this
}