0

我在弹出窗口中定位图像（箭头）时遇到很多问题。使用相对于框的定位，我无法将 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>

但是，既然它与框的其余部分无关，它实际上并没有移动 - 只是扩展了弹出窗口。

有没有做我想做的事？我在正确的轨道上吗？

干杯!

编辑：这个箭头应该指向标题（弹出说“在标题中......”）；我不是特别喜欢这种设置，但想不出其他任何东西。如果您有更好的主意，请发布:-)

4

2 回答 2

0

您将需要这样的组合：

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

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

于 2013-01-25T15:12:29.583 回答
0

您最好将其设为 div 的背景图像。

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

</div>
于 2013-01-25T15:13:15.677 回答