Question

我在弹出窗口中定位图像（箭头）时遇到很多问题。使用相对于盒子的定位，我无法将img移动到正确的位置。

所以我尝试了绝对，或者更确切地说，在div中放置一个div（显示摘录。）

<div style="position:relative;top:0px;bottom:500px;left:100px">
<img src="my_image.png" style="position:absolute" height="50" width="100" alt="Arrow pointing to the top right corner of the page" />
</div>

然而，现在它与盒子的其他部分无关，它并没有真正移动 - 只是扩展弹出窗口。

无论如何都要做我想要的事情？我是在正确的轨道上吗？

干杯！

编辑：此箭头应指向标题（弹出显示“在标题中......”）;我不是特别喜欢这个设置，但想不出别的什么。如果您有更好的主意，请发布： - ）

Answer 1

您需要这样的组合：

您的父元素（容器div，即弹出窗口）需要具有position：relative或absolute
你的孩子（箭头）需要：position：absolute，top：123px，left：245px（top和left表示相对于包含元素的位置）。

img的宽度和高度是无用的，除非你正在缩小或扩展IMG，你不应该这样做：丢弃它们。我不明白你的代码中的div是否只是箭头的包装，或者是弹出容器。在第一种情况下，您可以删除它，并将display：block设置为img元素。

Answer 2

你最好把它变成div的背景图片。

<div style="background-image: url('my_image.png'); background-position:top right; background-repeat:no-repeat;">

</div>

弹出窗口中图像的绝对定位

2 个答案: