html - 将关闭按钮放置在不同尺寸图像的右上角

Question

我有一个 <div>其中包括两个 <img> ，一个是关闭按钮，另一个是房间 map 。然而，roommap 的大小总是不同的，所以把关闭按钮放在绝对位置似乎不起作用。

有人知道我如何实现关闭按钮基于房间 map 大小并始终位于右上角吗？还有，整个<div>是一个位于屏幕中央的弹出窗口。

.cont2 {
  position: relative;
}
.cont2 .img2 {
  position: absolute;
  margin-top: 10%;
  right: 10%;
  z-index: 2;
}
.cont2 .img1 {
  position: absolute;
  margin-top: 15%;
  left: 50%;
  z-index: 1;
  border: 4px solid black;
  border-radius: 5px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -transform: translateX(-50%);
}

<div class="cont2" id="popImg">
  <img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
  <img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</div>

Answer 1

好的，您的问题是您需要一个 div 来容纳图像并且大小相同，以便您可以相对于图像大小定位十字。

尝试以下操作(我已经添加了一个额外的图像持有者 div，但如果您不想要这个，只需将您的主要 cont2 div inline-block):

.cont2 {
  position: relative;
}
.cont2 .img2 {
  position: absolute;
  top: 10%;
  right: 10%;
  z-index: 2;
  border:1px solid red;
}
.cont2 .image-holder {
  display: inline-block;
  position: absolute;
  margin-top: 15%;
  left: 50%;
  border: 4px solid black;
  border-radius: 5px;
  transform: translateX(-50%);
}
.cont2 .image-holder img {
  display: block
}

<div class="cont2" id="popImg">
  <div class="image-holder">
    <img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
    <img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
  </div>
</div>