如何将ion-icon放置在ion-avatar右下角边框位置

当前问题 #

现有头像组件支持展示用户头像、姓名及更换头像的图标，当前运行效果如下：

目前图标位置过低，需要调整到贴合头像右下角边框的位置，匹配如下目标设计效果：

现有代码 #

HTML结构：

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

SCSS样式：

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

ion-avatar {
    // 控制图标靠右
    text-align: right;
}

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

此前尝试将ion-icon嵌套入ion-img标签内时图标直接消失，调整对齐、定位属性也只能将图标固定在左侧，无法实现右下角贴合边框的效果。 #

可行实现方案 #

不需要修改现有HTML结构，通过父相子绝的定位方式即可实现目标效果：

• 给头像容器.profile-pic-container添加相对定位，作为内部绝对定位元素的位置参照，同时移除原有ion-avatar上无效的text-align: right规则
• 给相机图标设置绝对定位，通过right、bottom属性固定到容器右下角，可按需添加背景、边框样式匹配设计稿
  调整后的完整SCSS代码如下：

.profile-pic-container {
    height: 100px;
    width: 100px;
    /* 作为绝对定位元素的参照父容器 */
    position: relative;
    /* 覆盖ion-avatar默认的overflow:hidden，避免图标被容器边缘裁切 */
    overflow: visible;
}

#camera-icon {
    font-size: 24px;
    /* 脱离文档流，相对于父容器定位 */
    position: absolute;
    right: 0;
    bottom: 0;
    /* 以下为匹配设计稿的可选样式，可根据需求删除或调整 */
    background: #fff;
    border-radius: 50%;
    padding: 4px;
    border: 2px solid #fff;
    /* 微调偏移量，让图标刚好压在头像边框上，数值可根据实际渲染效果调整 */
    transform: translate(15%, 15%);
}

提示：如果渲染后图标依然被裁切，逐级检查父级元素是否设置了overflow: hidden属性，覆盖为overflow: visible即可。

此前尝试失效的原因 #

• 图标放入ion-img内消失：ion-img是封装的图片替换组件，不会渲染嵌套在其内部的子节点，图标必须与ion-img同级放在头像容器下
• 调整对齐属性无法定位到右下角：text-align仅能控制行内内容在正常文档流中的水平对齐，无法实现悬浮在头像上层的贴合效果，必须通过定位让图标脱离正常文档流。

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