Html 将“关闭”按钮放置在具有不同大小的图像的右上角

我有一个

，其中包括两个

---

我不得不稍微重构一下您的css，但这里有一个可行的版本：

#popImg{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：200px；
高度：200px；
}
img{
位置：绝对位置；
}
#关闭按钮{
右：0；
排名：0；
z指数：2；
光标：指针；
}
#房间选择{
宽度：100%；
高度：自动；
z指数：1；
}

---

我不得不稍微重构一下您的css，但这里有一个可行的版本：

#popImg{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：200px；
高度：200px；
}
img{
位置：绝对位置；
}
#关闭按钮{
右：0；
排名：0；
z指数：2；
光标：指针；
}
#房间选择{
宽度：100%；
高度：自动；
z指数：1；
}

---

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

尝试以下操作（我添加了一个额外的图像保持器div，但如果您不想这样做，只需将主cont2 div内联块设置为）：

.cont2{
位置：相对位置；
}
.cont2.img2{
位置：绝对位置；
排名前10%；
右：10%；
z指数：2；
边框：1px纯红；
}
.cont2.图像支架{
显示：内联块；
位置：绝对位置；
利润率最高：15%；
左：50%；
边框：4倍纯黑；
边界半径：5px；
转化：translateX（-50%）；
}
.续2.图像支架img{
显示：块
}

---

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

尝试以下操作（我添加了一个额外的图像保持器div，但如果您不想这样做，只需将主cont2 div内联块设置为）：

.cont2{
位置：相对位置；
}
.cont2.img2{
位置：绝对位置；
排名前10%；
右：10%；
z指数：2；
边框：1px纯红；
}
.cont2.图像支架{
显示：内联块；
位置：绝对位置；
利润率最高：15%；
左：50%；
边框：4倍纯黑；
边界半径：5px；
转化：translateX（-50%）；
}
.续2.图像支架img{
显示：块
}

---

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

.cont2{
位置：相对位置；
文本对齐：居中；
}
.cont2.img2{
位置：绝对位置；
利润率最高：10%；
右：10%；
z指数：2；
}
.cont2.img1{
位置：相对位置；
利润率最高：15%；
z指数：1；
边框：4倍纯黑；
边界半径：5px；
}
.包装纸{
显示：内联块；
位置：相对位置；
}

---

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

.cont2{
位置：相对位置；
文本对齐：居中；
}
.cont2.img2{
位置：绝对位置；
利润率最高：10%；
右：10%；
z指数：2；
}
.cont2.img1{
位置：相对位置；
利润率最高：15%；
z指数：1；
边框：4倍纯黑；
边界半径：5px；
}
.包装纸{
显示：内联块；
位置：相对位置；
}

您有JSFIDLE还是什么？我们必须看看你尝试了什么。与其给出一个百分比，不如给它一个px的顶部和右侧right@Pete我不认为这会起作用，因为roomchoose的图像大小总是不同的，我希望它位于图像大小的右上角：/或者有一个选项可以获取roomchoose当前src的图像大小，然后将其添加到结束button@Roy有没有上传图片的选项：x似乎找不到它抱歉，现在你做了一个片段，我可以看到你的问题是什么你有JSFIDLE还是什么？我们必须看看你尝试了什么。与其给出一个百分比，不如给它一个px的顶部和右侧right@Pete我不认为这会起作用，因为roomchoose的图像大小总是不同的，我希望它位于图像大小的右上角：/或者有一个选项可以获取roomchoose当前src的图像大小，然后将其添加到结束button@Roy有没有上传图片的选项：x似乎找不到它啊抱歉，现在你已经做了一个片段，我可以看到你的问题是什么了damn，开始吧。该死，开始吧。