Question

我有一个<img>，其中包含两个<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%); }是一个以屏幕中间为中心的弹出窗口。

＆＃13;

<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>

＆＃13;

public interface Kernel32 extends com.sun.jna.platform.win32.Kernel32 {

        /**
         * Generates simple tones on the speaker. The function is synchronous; 
         * it performs an alertable wait and does not return control to its caller until the sound finishes.
         * 
         * @param dwFreq : The frequency of the sound, in hertz. This parameter must be in the range 37 through 32,767 (0x25 through 0x7FFF).
         * @param dwDuration : The duration of the sound, in milliseconds.
         */
        public abstract void Beep(int dwFreq, int dwDuration);
}

＆＃13;

Answer 1

好的，你的问题是你需要一个div来保持图像并且大小相同，这样你就可以相对于图像大小定位十字架。

尝试以下操作（我添加了一个额外的图像持有者div，但如果你不想这样，只需将你的主要cont2 div内联块）：

.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>

Answer 2

我必须稍微重构你的CSS，但这是一个有效的版本：

#popImg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}
img {
  position: absolute;
}
#closebutton {
  right: 0;
  top: 0;
  z-index: 2;
  cursor: pointer;
}
#roomchoose {
  width: 100%;
  height: auto;
  z-index: 1;
}

<div class="cont2" id="popImg">
  <img class="img2" id="closebutton" src="http://placehold.it/50x40/ff0000/ffffff">
  <img class="img1" onclick="point_it(event)" id="roomchoose" src="http://placehold.it/500x400" />
</div>

主要变化是#popImg现在是偏向中心的元素。这是您之前遇到问题的主要原因，因为#closebutton与#roomchoose没有任何关系。

Answer 3

现在使用块包装器，它的宽度为100％。为图像使用内联块包装器。并且不要对主图像使用绝对位置，它不会为父div创建宽度：

.cont2 {
  position: relative;
  text-align:center;
}
.cont2 .img2 {
  position: absolute;
  margin-top: 10%;
  right: 10%;
  z-index: 2;
}
.cont2 .img1 {
  position: relative;
  margin-top: 15%;
  z-index: 1;
  border: 4px solid black;
  border-radius: 5px;
}
.wrapper{
  display:inline-block;
  position:relative;
}

<div class="cont2" id="popImg">
  <span class="wrapper">
    <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" />
  </span>
</div>

将关闭按钮放置在具有不同大小的图像的顶部严格角落中

3 个答案: