Javascript 屏幕html上div中的图像位置

我正在建立一个码头式菜单。我有4个缩略图在底部，我想弹出一个div。一切都很好，除了一件事，当我试图将弹出div定位在缩略图上方时，我不知道如何获得图像的位置。我尝试了offset和$element.width，但它们都返回了包含缩略图的底部主div的位置。我该怎么办

下潜

<div id=menu>
    <a href="http://www.google.com">
        <img id="fest" src="icon/fest.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
    <img id="music" src="icon/music.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
        <img id="diaf" src="icon/diaf.png" style="position: relative;"height="150"/>
    </a>
    <a href="http://www.google.com">
        <img id="show" src="icon/show.png" style="position: relative;"height="150"/>
    </a>
</div>

感谢您并为我的英语感到抱歉，我不是以英语为母语的人。

根据您的布局： 如果可能，将弹出窗口创建为缩略图的子级。将缩略图设置为

position:relative;

和弹出的

position:absolute;
bottom:100%;

请参见此处动态创建的示例：

如果希望弹出窗口的水平中心与缩略图的水平中心相匹配，也可以在CSS中执行此操作：

---

请提供您的代码，以便我们可以帮助您。我仍然不清楚您到底希望发生什么，并且当您希望它发生时，显然现在涉及动画？。另外：您是否在使用其他资源？因为：ReferenceError:getPosition未定义。提供的代码混合了HTML和CSS，因此是理想的，但更重要的是，它有一些错误或怪癖，而不是“菜单未转义的ID”。从现在开始，您可能希望使用重写的代码来简化我们的工作。此外，缺少一些名为kathar的函数：这有什么作用？此摘录中未定义名为itx的变量。。。请确保您为我们提供了一个代表项目当前状态的工作示例。缩略图是一个img元素，它是底部div的子元素，我希望弹出窗口的水平中心与缩略图的水平中心相同。我看到您仍然没有向我们提供任何代码：没有HTML，没有CSS，没有JavaScript，甚至连链接都没有。如果没有我们的帮助，除了猜测之外，我们真的帮不了你多少。。。弹出窗口来自哪里？请提供一些代码片段来说明您的问题。创建一个是最好的方法。我只想做一件事，以像素为单位得到一个带div的Img的水平位置。这取决于Img最初是如何到达那里的。根据CSS，在jQuery和浏览器解释中，有几种方法可以询问职位。你知道你可以用谷歌搜索这些。确保您知道img在哪里的一个简单方法是，例如，将位置先设置为0px左，然后从那里开始工作；为了稳定起见，我建议使用css left：为了这个。但是，我担心，如果从一开始就做好，你想要实现的目标可能会容易得多。如果你能告诉我们你想要达到什么样的行为……我有一个底部菜单，有4张图片。类似于MacOS中的dock。我想弹出一个垂直div，正好在缩略图上方。例如，如果我将鼠标悬停在第三幅图像上，则会弹出一个div，其水平中心位于第三幅图像水平中心的正上方。

position:relative;

position:absolute;
bottom:100%;

.popup{
    position:absolute;
    bottom:100%;
    left:0%;
    right:0%;
    margin: 0 auto;
}