html - 将按钮放在不同尺寸的盒子中的相同位置

Question

我正在使用图片库。每个图像都有不同的大小、砖石风格。如何在每个图像内的相同位置放置不同尺寸的按钮？我想把按钮放在右上角。

CSS

.EyeG{
  cursor: pointer;
  position: absolute;
  background-color: white; 
  background-image: url("/assets/eye.svg");
  background-position: 13px 13px;
  background-repeat: no-repeat;
  height: 15%;
  width: 15%;
  margin-top: -329px;
  right: 13px;
  border-radius: 8px;
  opacity: 1;
}

HTML

<ngx-masonry [options]="masonryOptions" [useImagesLoaded]="true">
        <ngxMasonryItem *ngFor="let p of products" class="masonry-item">      
      </div>
          <img [src]="imagMap.get(p.id)">
          <figcaption class="EyeG"></figcaption>
        </ngxMasonryItem>
      </ngx-masonry>

Answer 1

试试这个

.masonry-item { position: relative }
.EyeG{
  cursor: pointer;
  position: absolute;
  background-color: white; 
  background-image: url("/assets/eye.svg");
  background-position: 13px 13px;
  background-repeat: no-repeat;
  height: 15%;
  width: 15%;
  border-radius: 8px;
  opacity: 1;
 top:50%;
left:50%;
transfomrm: translate(-50%, -50%);

}