Javascript 使用CSS在图像上定位按钮元素

我正在使用这个UI设计，在那里我创建了一个化身图像和一个上传按钮。我的挑战是在图片上定位上传按钮，如下所示

期望值

但这就是我想到的

document.querySelector（“#btnOpenFileDialog”）.addEventListener（'click'，function（）{
document.querySelector（“#fileLoader”）。单击（）；
});
。图像裁剪器{
显示：内联块；
边界半径：50%；
边框：1px实心#F2F2；
溢出：隐藏；
}
img{
最大宽度：100%；
高度：自动；
}
.编辑img btn{
位置：绝对位置；
颜色：白色；
字体大小：.5rem；
宽度：22px；
高度：22px；
填充物：5px；
边界：0；
边界半径：50%；
背景#4169E2；
盒影：0px4px4pRGBA（0,0,0,0.21）；
}
.编辑img btn i{
字体大小：13px；
}

编辑
如果使用
位置：相对
将其全部放置在内联块元素中，则可以根据需要调整位置。下面是一个例子


document.querySelector（“#btnOpenFileDialog”）.addEventListener（'click'，function（）{
document.querySelector（“#fileLoader”）。单击（）；
});
/*带位置的包装器：相对*/
.图像包装器{
位置：相对位置；
}
.图像裁剪器{
显示：内联块；
边界半径：50%；
边框：1px实心#F2F2；
溢出：隐藏；
}
img{
最大宽度：100%；
高度：自动；
}
.编辑img btn{
位置：绝对位置；
底部：5px；/*5px从底部向上*/
右侧：35px；/*35px从右侧开始*/
颜色：白色；
字体大小：.5rem；
宽度：22px；
高度：22px；
填充物：5px；
边界：0；
边界半径：50%；
背景#4169E2；
盒影：0px4px4pRGBA（0,0,0,0.21）；
}
.编辑img btn i{
字体大小：13px；
}

编辑
添加css属性
顶部：134px和
左：134px到类
。编辑img btn


document.querySelector（“#btnOpenFileDialog”）.addEventListener（'click'，function（）{
document.querySelector（“#fileLoader”）。单击（）；
});
。图像裁剪器{
显示：内联块；
边界半径：50%；
边框：1px实心#F2F2；
溢出：隐藏；
}
img{
最大宽度：100%；
高度：自动；
}
.编辑img btn{
位置：绝对位置；
顶部：134px；
左：134px；
颜色：白色；
字体大小：.5rem；
宽度：22px；
高度：22px；
填充物：5px；
边界：0；
边界半径：50%；
背景#4169E2；
盒影：0px4px4pRGBA（0,0,0,0.21）；
}
.编辑img btn i{
字体大小：13px；
}

edit
Ok，但是为什么用div包装它会有其他效果呢？因为div是块级元素，会扩展以填充宽度。如果将div设置为display:inline block，则该div有效