Javascript 绝对元素的不同位置取决于使用的设备或浏览器

我正试图解决将按钮定位在现有div上的问题。一旦桌面或安卓手机上一切正常，Iphone上的按钮就会在不同的位置

这就是它所支持的外观（铅笔元素）：

Ant这是它在Iphone上的外观：

所以我把它包装在父容器中，父容器有

相对位置

，你们可以看到的铅笔是

绝对位置

：

<div class="position-relative">
      <button
        *ngIf="!user.UserInfo.ProfilePicture"
        class="user-avatar-btn h-100-px w-100-px cc-grey-500-txt">
        {{ user.UserInfo | userInfoInitials }}
      </button>
      <img
        *ngIf="user.UserInfo?.ProfilePicture"
        [src]="user.UserInfo.ProfilePicture"
        class="user-avatar-btn h-100-px w-100-px"
      />
      <app-image-upload-button class="bottom-right-icon" (fileEvent)="editPhoto($event)"></app-image-upload-button>
</div>

职位的CSS：

.bottom-right-icon {
 filter: drop-shadow(0px 0px 12px #c4c4c4);

 ::ng-deep span {
   position: absolute;
   left: -30px;
   top: 15px;
 }
}

---

有人能帮我解决这个问题吗？谢谢

相对位置div是否具有宽度和高度？可能将此

{{'create'}}

包装在一个div中，并将position:absolute添加到该包装div中。

.bottom-right-icon {
 filter: drop-shadow(0px 0px 12px #c4c4c4);

 ::ng-deep span {
   position: absolute;
   left: -30px;
   top: 15px;
 }
}