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

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

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>

---

附加的代码笔链接，请查看

如果你在这里没有找到解决方案，请告诉我。我会帮助你的

<div class="header">
  <h1>Responsive Masonry.js Grid</h1>
  <p>A horizontal image card grid built with masonry.js</p>
</div>

<div class="container">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <a class="item" href="#">
    <img src="https://placehold.it/350x300">
    <sapn class="EyeG"></span>
  </a>
  <a class="item" href="#">
    <img src="https://placehold.it/350x200">
    <sapn class="EyeG"></span>
  </a>
  <a class="item" href="#">
    <img src="https://placehold.it/300x290">
    <sapn class="EyeG"></span>
  </a>
  <a class="item" href="#">
    <img src="https://placehold.it/400x300">
    <sapn class="EyeG"></span>
  </a>
  <a class="item" href="#">
    <img src="https://placehold.it/350x350">
    <sapn class="EyeG"></span>
  </a>
  <a class="item" href="#">
    <img src="https://placehold.it/400x300">
    <sapn class="EyeG"></span>
  </a>
  <a class="item" href="#">
    <img src="https://placehold.it/400x500">
    <sapn class="EyeG"></span>
  </a>
</div>

js网格
使用Mashise.js构建的水平图像卡网格

试试这个

.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%);

}

---

你用%表示高度和宽度，为什么不用%表示眼睛的位置呢？这可以帮助您按照图像的尺寸进行定位，但不会导致框的放置：(